Simple use of Baidu editor ueditor

Recently, I was assigned a message publishing task, which uses the rich text editor. I used it before, but this time I chose Baidu Rich Text Editor ueditor1_4_3-utf8-jsp edition.

In fact, the ueditor function is very powerful, but Baidu's design is still very good. You only need to configure it a little bit.

First download to the ueditor1_4_3-utf8-jsp.rar, the connection address is: http://ueditor.baidu.com/website /. I chose the UTF-8 version.

Decompress the package and copy it to the webpage root directory of the java web project. I am using a project created in myeclipse, So copy the ueditor to WebRoot.

Step 2: reference the jar package under ueditor/jsp/lib. You can choose to directly configure in Java Build Path, or directly put in the WebRoot/WEB-INF/lib folder, the project will automatically reference the jar under this folder. It is recommended to put it directly under the WEB-INF/lib, so that your jar will move as the project moves, the system will follow the jar under the relative path add-on directory. If the first option is selected, this function will become invalid if the jar file is moved.

Step 3: introduce two js files on the page

<scripttype="text/javascript"src="ueditor/ueditor.config.js"></script><scripttype="text/javascript"src="ueditor/ueditor.all.js"></script>

Step 4: Add html code in the editor of the page

<Textareaname = "content" id = "myEditor"> </textarea> <scripttype = "text/javascript"> UEDITOR_CONFIG.UEDITOR_HOME_URL = '. /ueditor/'; // you must use this sentence; otherwise, you must go to ueditor. config. js modifies the path configuration information UE. getEditor ('myeditor'); </script>

Step 5: ueditor supports uploading images, documents, music, and other files. If you want to configure the upload path, you can modify ueditor/jsp/config. json.

This file provides a clear description of each configuration item. Attach a picture upload Configuration:

/* Upload image configuration item */"imageActionName": "uploadimage",/* action name of the image to be uploaded */"imageFieldName": "upfile ", /* The Name Of The submitted image form */"imageMaxSize": 2048000,/* the size limit of the upload. Unit: B */"imageAllowFiles ":[". png ",". jpg ",". jpeg ",". gif ",". bmp "],/* upload image format display */" imageCompressEnable ": true,/* Whether to compress the image. The default value is true */" imageCompressBorder ": 1600, /* maximum side limit of Image Compression */"imageInsertAlign": "none",/* floating mode of the inserted image */"imageUrlPrefix ":"", /* image access path prefix */"imagePathFormat": "_ images/image/{yyyy} {mm} {dd}/{time} {rand: 6 }", /* upload and save path. You can customize the Save path and file name format */

Step 6: ueditor supports custom functions. All the functions displayed on the interface are configurable. You only need to delete and modify the configuration in the toolbar of ueditor/ueditor. config. js. The Code is as follows:

// All the function buttons and drop-down boxes in the toolbar. You can select the new definition you need when using the new editor instance. toolbars: [['fullscreen ', 'source ', '|', 'undo ', 'redo', '|', 'bold ', 'italic', 'underline', 'fontborder', 'strikethangout', 'superscript ', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain ',' | ', 'forecolor', 'backcolor', 'insertorderedlist ', 'insertunorderedlist', 'selectall', 'cleardoc ',' | ', 'rowspacingtop', 'rowspacingbottom ', 'lineheight',' | ', 'customstyle', 'Paragraph ', 'fontfamily ', 'fontsize',' | ', 'ctionctionalityltr', 'ctionalalityrtl', 'indent ',' | ', 'justifyleft', 'justifycenter', 'justifyright ', 'justifyjustify ',' | ', 'touppercase', 'lowercase',' | ', 'link', 'unlink', 'anchor', '|', 'imagenone ', 'imageleft ', 'imageright', 'imagecenter', '|', 'simpleupload', 'insertimage', 'expression', 'scrawl ', 'insertvideo', 'music ', 'attachment', 'map', 'gmap', 'insertframe ', 'insertcode', 'pagebreak', 'template', 'background',' | ', 'horizontal ', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|', 'inserttable', 'deleteable', 'insertparagrapappsforetable', 'insertrow ', 'delterow', 'insertcol', 'deleteole', 'mergecells ', 'mergeright', 'mergelow', 'splittocells ', 'splittorows', 'splittocols', 'charts ', '|', 'searchreplace ', 'help', 'drafs']

It looks like 6 steps, but each step is actually quite simple. To make the friends more clear, let's take a look:

The effect is good. In fact, it seems that complicated functions are easy to implement. The implementation of simple functions may be complicated. We don't just need to use a variety of open-source components that look complicated and simple to use. We also need to learn how to encapsulate complicated functions and provide simple interfaces for others to use.