Online Rich Text Editor Umeditor use example

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.

How to use?

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>
</script>

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>
<link href= "Themes/default/css/umeditor.min.css" type= "Text/css" rel= "stylesheet" >

Next, we start calling the editor:

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

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.
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 (' There is 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; > Write your initialization content here </script>

<button type= "Submit" class= "BTN" > Submit </button>
</form>

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 fullscreen ', ' link unlink ', ' | justifyleft justifycenter justifyright justifyjustify | ', ' emotion I Mage Video | Map ']

});
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.