Simple use of Baidu editor ueditor

Source: Internet
Author: User

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

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:




Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.