search

Home >Web Front-end >JS Tutorial >jquery customizable online UEditor editor_jquery

jquery customizable online UEditor editor_jquery

WBOY
WBOYOriginal
2016-05-16 15:31:491561browse

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>

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>

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">

Next, we start calling the editor: 

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

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();

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('无内容。'); 
 }

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>

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'] 
 
});

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.

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
Previous article：A daily javascript learning summary (RegExp object)_javascript skillsNext article：A daily javascript learning summary (RegExp object)_javascript skills

Related articles

See more