Home  >  Article  >  Web Front-end  >  jQuery rich text plug-in: How to use the wangEditor plug-in

jQuery rich text plug-in: How to use the wangEditor plug-in

不言
不言Original
2018-08-09 17:50:473261browse

The content of this article is about the jQuery rich text plug-in: how to use the wangEditor plug-in, which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Rich text is often used during development. The wangEditor recorded today is also a very easy-to-use rich text plug-in. How to use the picture directly:
1. First download the plug-in. You can download it from Baidu yourself
2. Introduce the plug-in file (two js, ​​one css)
jQuery rich text plug-in: How to use the wangEditor plug-in
3 , and then define the rich text editor in the js code
jQuery rich text plug-in: How to use the wangEditor plug-in

<script type="text/javascript">
        var E =  = window.wangEditor
  r        var editor = new E(&#39;#editor&#39;)        
  // 或者 var editor = new E( E( document.getElementByItById(&#39;editor&#39;) )
           editor.customConfig.uploadImgServServer = &#39;上传图片url&#39;;

           editor.customConfig.uploadFileNameName = &#39;上传图片文件夹名&#39;;
           editor.customConfig.uploadImgMaxSMaxSize = 图片限制大小;
           editor.customConfig.uploadImgHeadHeaders = {            
           &#39;Accept&#39; : &#39;multipart/form-data&#39;
        };
           editor.customConfig.debug=tru=true;
           editor.create()
 ()        var editor_value=$(&#39;.content&#39;).html();
           editor.txt.html(edi(editor_value);    
           </script>

where uploadImgServer is the interface for uploading images in text content, and uploadFileName is the folder name for uploading images in the root directory. uploadImgMaxSize is to define the maximum size of uploaded images
After filling in these configurations, add the following code where the rich text box needs to be inserted:
jQuery rich text plug-in: How to use the wangEditor plug-in

<p id="editor"></p>

The id in p must be editor, Then write editor.create() in js to create a rich text box. The effect is as follows: jQuery rich text plug-in: How to use the wangEditor plug-in

Related recommendations:

Javascript event delegation code implementation and code Optimization

Detailed case explanation: Introduction to dynamic programming (taking stair climbing as an example)

How to use simple js code to implement carousel scrolling Effect?

The above is the detailed content of jQuery rich text plug-in: How to use the wangEditor plug-in. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn