UI Rich Text editor-ueditor

In the Web application, often do rich text editing, commonly used Rich text editor has many, such as Cuteeditor, CKEditor, Niceditor, Kindeditor, Ueditor and so on.

Recommended here for everyone Baidu launched Ueditor,ueditor is the WYSIWYG Rich text editor, with light weight, customizable, focus on user experience characteristics.

Official website: http://ueditor.baidu.com/website/index.html

: http://ueditor.baidu.com/website/download.html

Ueditor simple steps to use:

1, in the use of the page correctly import ueditor js file

     <Scripttype= "Text/javascript"src= "<%=request.getcontextpath ()%>/js/ueditor.config.js"></Script>    <Scripttype= "Text/javascript"src= "<%=request.getcontextpath ()%>/js/ueditor.all.min.js"></Script>    <Scripttype= "Text/javascript"src= "<%=request.getcontextpath ()%>/js/lang/zh-cn/zh-cn.js"CharSet= "Utf-8" ></Script>

Note here that the Config.js file should be in front.

2. Add the following content to the form on the page form

     <formAction= "<%=request.getcontextpath ()%>/main/contractservlet.action"Method= "POST">                <Divstyle= "width:100%">            <Scripttype= "Text/plain"ID= "Myeditor"style= "width:100%;height:260px"></Script>        </Div>            </form>  </Body>

3, in the HTML after writing the following JS code: The official recommendation to call the factory method Geteditor to create a clip, and subsequent if the editor, you can call Ue.geteditor ("Myeditor") to get the editor's instance object.

  <type= "Text/javascript"><!--    ue.geteditor (" Myeditor ");/-</script>

After the above steps can be completed on the page using Ueditor, such as:

The following is a specific requirement for the specific use of some of the configuration items and methods of Ueditor.

Requirements: When doing an application, we need to save and manage the contract. The specific terms in the contract can be edited and generated according to the actual needs.

It is clear that the terms of the contract cannot be cluttered and plain text and need to have a certain format, where we need to use a rich text editor to edit the terms of the contract.

The terms of the contract is generally with the style of text, will not contain pictures, videos, attachments and other content, it is clear that the above steps to add the Ueditor does not meet our requirements, which requires our own custom ueditor.

How to customize it? Ueditor provides us with two ways to set properties.

Mode one: By modifying the configuration information inside the ueditor.config.js;

Mode two: When creating the Ueditor, pass in the configuration item parameter.

For specific configuration information, you can view the official documentation, which is not mentioned here.

Here, using mode two, when creating Ueditor, the incoming configuration parameters are customized in the form of the following code:

varopts={        //Custom Tool Buttonstoolbars:[["fullscreen", "Source", "undo", "Redo", "bold", "Italic", "Underline", "|",        "Strikethrough", "Horizontal", "Date", "FontFamily", "FontSize", "Lineheight", "Customstyle",        "Justifyleft", "Justifyright", "Justifycenter", "Removeformat"]],        //get cursor is, whether to automatically empty the initialization dataAutoclearinitialcontent:false,        //whether to show element pathsElementpathenabled:false,        //whether to countWordCount:false,        //whether the height is automatically increasedAutoheightenabled:false,        //the parameter name of the data that the background accepts UeditorTEXTAREA: "Contact_content"    }; Ue.geteditor ("Myeditor", opts);

It is clear that the customized Ueditor is more in line with our needs.

In the servlet, you can use the Getparamter method of request to get the edited data in Ueditor, which is the value set by the property textarea in Ueditor.

How do I initialize the template data in Ueditor? There are two ways to do it:

The first is in the configuration item by setting the Initialcontent property;

The second is by calling the Ueditor SetContent method.

Method one: By requesting the servlet to invoke the business method in the servlet, the contract template information saved in the database is loaded and saved in the request, and the data is fetched in the page and assigned when the Ueditor is initialized by forwarding to the contract edit page.

<formAction= "<%=request.getcontextpath ()%>/main/contractservlet.action"Method= "POST">        <inputname= "Reqcode"type= "hidden"ID= "Reqcode"value= "Savecontactmodel" />        <Divstyle= "width:100%">            <Scripttype= "Text/plain"ID= "Myeditor"style= "width:100%;height:260px"></Script>        </Div>        <inputtype= "hidden"name= "Content"ID= "Content"value= "${content}">        <inputtype= "Submit"value= "Save contract template">    </form>

The JS code is as follows:

varContent = document.getElementById ("Content"). Value; varopts={        //Custom Tool Buttonstoolbars:[["fullscreen", "Source", "undo", "Redo", "bold", "Italic", "Underline", "|",        "Strikethrough", "Horizontal", "Date", "FontFamily", "FontSize", "Lineheight", "Customstyle",        "Justifyleft", "Justifyright", "Justifycenter", "Removeformat"]],        //Initializing Ueditor contentInitialcontent:content,//get cursor is, whether to automatically empty the initialization dataAutoclearinitialcontent:false,        //whether to show element pathsElementpathenabled:false,        //whether to countWordCount:false,        //whether the height is automatically increasedAutoheightenabled:false,        //the parameter name of the data that the background accepts UeditorTEXTAREA: "Contact_content"    }; Ue.geteditor ("Myeditor", opts);

Method Two: Directly request the contract edit page, in the page using the Ajax provided by Ueditor to load the contract template, and through the SetContent method to assign values.

varEditor= ue.geteditor ("Myeditor", opts); Editor.addlistener ("Ready",function(){        //request Data via AjaxUE.ajax.request ("<%=request.getcontextpath ()%>/main/contractservlet.action", {method:"POST", Async:true, data:{"Reqcode": "Findcontactmodel"}, Onsuccess:function(XHR) {vars =Xhr.responsetext; Ue.geteditor ("Myeditor"). SetContent (s); document.getElementById ("Show"). innerhtml=s;    }            }        ); });

Note that this place must wait until the ueditor load is complete before calling the Setconent method, so you need to listen for the Ueditor ready event.

UI Rich Text editor-ueditor