jquery customizable online UEditor editor

jquery customizable online UEditor editor_jquery

WBOY

Release： 2016-05-16 15:31:49

Original

1509 people have browsed it

UMeditor, which is a mini version of the WYSIWYG rich text web editor UEditor developed by Baidu web front-end R&D department, is lightweight, customizable, focuses on user experience, and allows free use and modification of code , suitable for front-end quick and simple reply box or back-end content editor.

Usage:

Because this plug-in was developed by Baidu's "FEX Front-end R&D Team", it has a strong and detailed official Chinese document. The purpose of this article is just to let friends know that there is such a good plug-in, so the documentation manual, downloads, and examples are all Link to official.
Download the language version you need, then unzip it, and create an html file named demo in the unzipped directory. The code is as follows

<!DOCTYPE HTML>
<html>
 
<head>
 <meta charset="UTF-8">
 <title>ueditor demo</title>
</head>
 
<body>
 <!-- 加载编辑器的容器 -->
 <script id="container" name="content" type="text/plain">
 这里写你的初始化内容
 </script>
 <!-- 配置文件 -->
 <script type="text/javascript" src="ueditor.config.js"></script>
 <!-- 编辑器源码文件 -->
 <script type="text/javascript" src="ueditor.all.js"></script>
 <!-- 实例化编辑器 -->
 <script type="text/javascript">
 var ue = UE.getEditor('container');
 </script>
</body> 
</html>

Copy after login

OK, after completing the above work, open demo.html with a browser. If you see the following screen, congratulations, the first deployment was successful!

How to use? Another detailed usage:
Create a demo.html file. First, add the following code where you need to add an editor. Use style to set the width and height of the editor.

<script type="text/plain" id="myEditor" style="width:98%;height:240px;"> 
 <p>内容区域</p> 
</script>

Copy after login

Then, load the UMeditor related js and css files. Relevant files can be downloaded from this site or go directly to the UMeditor official website to 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">

Copy after login

Next, we start calling the editor:

<script type="text/javascript"> 
 var um = UM.getEditor('myEditor'); 
</script>

Copy after login

Now we can open the browser to preview the editor effect.
Customization options
UMeditor provides a wealth of option settings that users can customize according to their own project needs.
You can use the following code to get the content in the editor. You can also get plain text content.

UM.getEditor('myEditor').getContent();

Copy after login

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

 var cont = UM.getEditor('myEditor').hasContents(); 
 if(cont==true){ 
 alert('有内容。'); 
 }else{ 
 alert('无内容。'); 
 }

Copy after login

If you put the editor into a form and set the action path, you can submit the form to send the content in the editor. Such as:

<form action="server.php" method="post"> 
 <script id="container" name="content" type="text/plain" style="width:98%;height:240px;">这里写你的初始化内容</script> 
 <button type="submit" class="btn">提交</button> 
</form>

Copy after login

We can set the tool icons allowed in the toolbar. For example, the following are simple customizations of several commonly used tool icons:

var editor = UM.getEditor('container',{ 
 toolbar: 
 ['bold italic underline fullscreen', 'link unlink','| justifyleft justifycenter justifyright justifyjustify |', 'emotion image video | map'] 
 
});

Copy after login

UMeditor provides many tools that can be customized according to needs, such as table editing, list layout, multimedia insertion, image upload, map calling, etc. UMeditor provides several language versions of the server, mainly used for processing uploaded images. Users can set upload paths, upload file type limits, size limits, and more. Just set it up and apply.

Usage effect:

The above is the entire content of this article. I hope it can help everyone use the UMeditor editor better.