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 with the connection address :. 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: