UEditor学习笔记(一)

来源：互联网发布：java 项目源代码编辑：程序博客网时间：2024/05/09 18:49

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，(优点)具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码.

什么是富文本编辑器?

富文本编辑器是一种可内嵌于浏览器，所见即所得的文本编辑器

UEditor入门

入门部署和体验

第一步、下载编辑器：下载地址:http://fex.baidu.com/ueditor/

1.1.创建demo.html文件

解压我们下载好的压缩包,在解压文件的根目录下,创建demo.html文件

然后,将我们创建好的demo.html文件打开写入如下代码

<!DOCTYPE HTML>

<head>

<title>ueditor demo</title>

</head>

<body>

这里是容器要显示的内容

</script>

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"%>

<!DOCTYPEhtml 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="${pageContext.request.contextPath}/js/ueditor.config.js"></script>

<scripttype="text/javascript"charset="utf-8"src="${pageContext.request.contextPath}/js/ueditor.all.min.js"></script>

<scripttype="text/javascript"charset="utf-8"src="${pageContext.request.contextPath}/js/lang/zh-cn/zh-cn.js"></script>

<styletype="text/css">

div{

width:100%;

}

</style>

</head>

<body>

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

</div>

<scripttype="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里的配置项要熟悉并且明白他是干什么用的,优点是是:减少了页面代码量,实现修改配置文件达到想要实现的效果

0 0

UEditor学习笔记(一)

什么是富文本编辑器?

UEditor入门

入门部署和体验

第一步、下载编辑器：下载地址:http://fex.baidu.com/ueditor/

如何在jsp部署UEditor

定制工具栏图标:定制工具栏图标有俩种方法

小结: