UEditor学习笔记(一)

最新推荐文章于 2021-01-28 14:47:11 发布

cidu1823

最新推荐文章于 2021-01-28 14:47:11 发布

阅读量146

点赞数

文章标签： javascript php java ViewUI

原文链接：https://my.oschina.net/Gxl8443/blog/717323

版权

什么是富文本编辑器?

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

div{

width: 100%;

}

</style>

</head>

<body>

</div>

//实例化编辑器

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

转载于:https://my.oschina.net/Gxl8443/blog/717323

cidu1823

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
UEditor学习笔记(一)

什么是富文本编辑器? 富文本编辑器是一种可内嵌于浏览器，所见即所得的文本编辑器 UEditor入门入门部署和体验第一步、下载编辑器：下载地址: http://fex.baidu.com/ueditor/ ...
复制链接

扫一扫