Baidu Ueditor use rich text editor

UEditor official website Download: https://ueditor.baidu.com/website/download.html

Here I downloaded version jsp version of UTF-8, then after decompression the compressed like this

extract the contents of index.html is a rich text provides us with the use of official routine, open the page you can experience a variety of rich text manipulation

Next UEditor applied to our own projects

1, create a new dynamic Web project

2 will be extracted to UEditor WebContent directory files are copied to the new construction

at this time will complain, do not worry. The reason is that we have not UEditor will need to use the jar package added to the project environment.

Next, open the directory jsp-> lib, lib will be following all the jar packages copied to all the WEB-INF / lib file, eclipse will automatically import new packages added to the project environment.

3, create a ueditor.jsp page to start importing UEditor rich text editor

Note: You must be the three files when importing UEditor,

 
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script> <!--ueditor的配置文件-->
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script> <!--ueditor核心文件-->
<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script> <!--ueditor语言文件-->

导入这3个文件之后在需要调用UEditor的位置加入

1 2	<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

最后通过初始化UEditor,让它显示出来

 
<script type="text/javascript">
        var ue = UE.getEditor('editor');
</script>

页面全部代码如下：

1
大专栏  百度富文本Ueditor编辑器的使用">2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

 
<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>
<title>ueditor</title>

</head>
<body>
    <div style="width: 300px; height: 200px;">
        <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
    </div>
    <script type="text/javascript">
        var ue = UE.getEditor('editor');
    </script>
</body>
</html>

Results are as follows:

Note: 1, when the contents of the text box with

2, when you need to upload the picture, you need to configure the picture path, or uploaded images in rich text editor is not showing up.

Change the image path> config.json file - in ueditor-> JSP -> lib

3, in the path of the rich text editor to join them ueditor.config.js

this configuration is complete! ! !

Baidu Ueditor use rich text editor

Guess you like