UEditor is a WYSIWYG rich text web editor developed by Baidu web front-end R&D department. (Advantages) It is lightweight, customizable, and focuses on user experience. The open source is based on the MIT protocol, allowing free use and modification of the code.
-
What is a rich text editor ?
A rich text editor is a WYSIWYG text editor that can be embedded in the browser
-
Getting Started with UEditor
-
Getting Started Deployment and Experience
The first step, download the editor: download address : http://fex.baidu.com/ueditor/
1.1. Create demo.html file
Unzip the compressed package we downloaded , and create a demo.html file in the root directory of the unzipped file
Then , open the demo.html file we created and write the following code
| <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> </head> <body> <!-- The container that loads the editor --> <script id="container" name="content" type="text/plain"> Here is what the container wants to display </script> <!-- Configuration file --> <script type="text/javascript" src="ueditor.config.js"></script> <!-- Editor source file --> <script type="text/javascript" src="ueditor.all.js"></script> <!-- Instantiation Editor --> <script type="text/javascript"> var ue = UE.getEditor('container', {}); </script> </body> </html> |
After writing , open demo.html with Firefox browser , as follows
1.2.Jar package and configuration files
Download the complete source package and unzip it as follows
- dialogs: 弹出对话框对应的资源和JS文件
- lang: 编辑器国际化显示的文件
- php或jsp或asp或net: 涉及到服务器端操作的后台文件
- themes: 样式图片和样式文件
- third-party: 第三方插件(包括代码高亮，源码编辑等组件）
- ueditor.all.js: 开发版代码合并的结果,目录下所有文件的打包文件
- ueditor.all.min.js: ueditor.all.js文件的压缩版，建议在正式部署时采用
- ueditor.config.js: 编辑器的配置文件，建议和编辑器实例化页面置于同一目录
- ueditor.parse.js: 编辑的内容显示页面引用，会自动加载表格、列表、代码高亮等样式;
- ueditor.parse.min.js: ueditor.parse.js文件的压缩版，建议在内容展示页正式部署时采用
注(后台相关处理的jar包)位于:jsp/lib下
(后端配置文件,所有前后端相关配置项,都放在这里)
(接收所有请求的接口文件)
-
如何在jsp部署UEditor
第一步:
新建项目UeditorTest
第二步:导入相应的jar包
第三步:导入配置文件
注:如果放入的配置文件不在项目的根目录下,必须打开ueditor.config修改其编辑器资源路径,如下图:(因为我将配置文件放入js文件夹里)
第四步:新建demo.jsp文件
编写如下代码:
| <%@ 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"> <title>demo01</title> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/ueditor.all.min.js"> </script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/lang/zh-cn/zh-cn.js"></script> <style type="text/css"> div{ width: 100%; } </style> </head> <body> <div> <!-— 这里就是UEditor的容器 --> <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script> </div> <script type="text/javascript"> //实例化编辑器 var ue = UE.getEditor('editor'); //实例化容器的ID </script> </body> </html> |
注: ueditor.config.js配置文件必须放置在第一行,否则会报错
第五步:完成,效果如下:
定制工具栏图标:定制工具栏图标有俩种方法
1. 修改ueditor.config.js里面的toolbars
2.实例化编辑器的时候传入toolbars参数
2.1 修改demo01.jsp文件
2.2 单行列表效果
2.3 双行列表代码:
2.4 完成效果
注:配置项里用竖线 '|' 代表分割线
小结:
做jsp的编辑器时,配置从1.2.4版本后,变化非常快,配置项就变得多了起来,需要我们注意的是ueditor.config.js里的配置项要熟悉并且明白他是干什么用的,优点是是:减少了页面代码量,实现修改配置文件达到想要实现的效果