In the Web development, especially when the site development of the background management system often used to rich text editor, here we use the Rich text editor provided by Baidu Ueditor, in order to improve our development efficiency
Ueditor Official website: https://ueditor.baidu.com/website/download.html
Here i download the JSP version of the UTF-8 version, and then unzip the package after the same look
The index.html in the extracted content is a rich text usage routine that is officially provided to us, opening the page to experience various rich text operations.
Next, we'll apply ueditor to our own projects.
1. Create a new Dynamic Web project
2. Copy the extracted ueditor files to the WebContent directory of the New project
This will be an error, do not worry. The reason is that we have not yet added the jar package that Ueditor needs to the engineering environment.
Next Open Directory Jsp->lib, all the jar packages below Lib are copied to the Web-inf/lib file, and Eclipse will automatically add the newly imported package to the project environment.
3. Create a new ueditor.jsp page and start importing the Ueditor Rich Text editor
Note: The 3 files that must be required when importing Ueditor
<Scripttype= "Text/javascript"CharSet= "Utf-8"src= "Ueditor/ueditor.config.js"></Script> <!--ueditor configuration file--<Scripttype= "Text/javascript"CharSet= "Utf-8"src= "Ueditor/ueditor.all.min.js"></Script> <!--ueditor core file --<Scripttype= "Text/javascript"CharSet= "Utf-8"src= "Ueditor/lang/zh-cn/zh-cn.js"></Script> <!--ueditor language files --
After importing these 3 files, add the location where you need to call Ueditor
<id= "Editor" type= "Text/plain" style= " width:1024px;height:500px; " ></ Script >
Finally, by initializing the Ueditor, let it show.
<type= "Text/javascript"> var= ue.geteditor ('editor'); </ Script >The entire page code is as follows:
<%@ Page Language="Java"ContentType="text/html; Charset=utf-8"pageencoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd "><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><Scripttype= "Text/javascript"CharSet= "Utf-8"src= "Ueditor/ueditor.config.js"></Script><Scripttype= "Text/javascript"CharSet= "Utf-8"src= "Ueditor/ueditor.all.min.js"></Script><Scripttype= "Text/javascript"CharSet= "Utf-8"src= "Ueditor/lang/zh-cn/zh-cn.js"></Script><title>Ueditor</title></Head><Body> <Divstyle= "width:300px; height:200px;"> <ScriptID= "Editor"type= "Text/plain"style= "width:1024px;height:500px;"></Script> </Div> <Scripttype= "Text/javascript"> varUE=Ue.geteditor ('Editor'); </Script></Body></HTML>
The effect is as follows:
Note: 1. When the contents of the text box are submitted with the <form> table, the content is stored in the Editorvalue variable and can be read when the content is fetched in the background.
2, in the need to upload images, you need to configure the picture path, otherwise uploaded pictures in the Rich Text editor is not displayed.
Change the picture path in the ueditor--->jsp----->lib---->config.json File
3. Add the path of the rich text editor to the Ueditor.config.js
To this configuration complete!!!
The use of Baidu Rich Text Ueditor editor
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
