A customizable web online Rich text editor based on jquery download _jquery

Today to introduce a very good web online Rich Text editor--umeditor, it is by Baidu Web front-end Research and development department developed the WYSIWYG web editor Ueditor Evolution of the mini edition editor, with lightweight, customizable, pay attention to the characteristics of user experience, Allows free use and modification of code for the foreground quick simple reply box or background content editor.

Online preview Source Download

How to use it?

To create a demo.html file, start by adding the following code where you need to add the editor, using style to set the width and height of the editor.

<script type= "Text/plain" id= "Myeditor" style= "width:98%;height:240px"; > 
 <p> content Area </p> 

Then, the Umeditor related JS and CSS files are loaded. Relevant documents can be downloaded from this site or directly to the Umeditor website download the latest version.

<script src= "Http://libs.useso.com/js/jquery/2.1.0/jquery.min.js" ></script> 
<script type= " Text/javascript "charset=" Utf-8 "src=" umeditor.config.js "></script> 
<script type=" Text/javascript "Charset=" Utf-8 "src=" Umeditor.min.js "></script> 

Next, we start calling the editor:

<script type= "Text/javascript" > 
 var um = um.geteditor (' Myeditor '); 

Now we can open the browser preview editor effect.

Customization options

Umeditor offers a wealth of option settings that users can tailor according to their own project needs.

Get the contents of the editor to use the following code, you can also get plain text content.

Copy Code code as follows:

Um.geteditor (' Myeditor '). GetContent ();

To determine if the editor has content, you can use the following code:

 var cont = Um.geteditor (' Myeditor '). hascontents (); 
 if (cont==true) { 
  alert (' has content. '); 
 } else{ 
  alert (' no content. '); 
 

If you put the editor in form form and set the action path, you can submit the contents of the form Transfer editor. Such as:

<form action= "server.php" method= "POST" > <script id= "container" name= 
 "content" type= "Text/plain" style= "width:98%;height:240px;" > here Write your initialization content </script> 
 <button type= "Submit" class= "BTN" > Submit </button> 

We can set the tool icon that is allowed in the toolbar, such as the following is a simple customization of several common tool icons:

var editor = um.geteditor (' container ', { 
 toolbar: 
  [' bold italic underline ', ' link fullscreen ', ' | Justifyleft justifycenter justifyright justifyjustify | ', ' Emotion image video | Map '] 

The

Umeditor provides a number of tools that can be tailored to your needs, such as table editing, list layout, multimedia inserts, picture uploads, map calls, and so on. Umeditor provides several language versions of the server, mainly for uploading images. Users can set the upload path, upload file type limits, size limits, and so on. Just set it up and apply it.