UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,(优点)具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.
-
什么是富文本编辑器?
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器
-
UEditor入门
-
入门部署和体验
第一步、下载编辑器:下载地址: http://fex.baidu.com/ueditor/
1.1.创建demo.html文件
解压我们下载好的压缩包,在解压文件的根目录下,创建demo.html文件
然后,将我们创建好的demo.html文件打开写入如下代码
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> </head> <body> <!-- 加载编辑器的容器 --> <script id="container" name="content" type="text/plain"> 这里是容器要显示的内容 </script> <!-- 配置文件 --> <script type="text/javascript" src="ueditor.config.js"></script> <!-- 编辑器源码文件 --> <script type="text/javascript" src="ueditor.all.js"></script> <!-- 实例化编辑器 --> <script type="text/javascript"> var ue = UE.getEditor('container', {}); </script> </body> </html> |
写完后,用火狐浏览器打开demo.html,如下
1.2.Jar包及各配置文件
下载完整源码包,解压后如下
- 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里的配置项要熟悉并且明白他是干什么用的,优点是是:减少了页面代码量,实现修改配置文件达到想要实现的效果