【JavaWeb】之富文本编辑器

---

前言

本文为JavaWeb基础富文本编辑器的介绍，使用与常用富文本编辑器，Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~

一、富文本编辑器介绍

富文本编辑器，Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能，容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。它的应用也越来越广泛。最先只有 IE 浏览器支持，其它浏览器相继跟进，在功能的丰富性来说，还是 IE 强些。虽然没有一个统一的标准，但对于最基本的功能，各浏览器提供的 API 基本一致，从而使编写一个跨浏览器的富文本编辑器成为可能。

抛开专业的定义，用自己的话来介绍一下到底什么是富文本编辑器。先举个简单的例子，大家大多都使用过网上的一些博客系统或者论坛贴吧吧，那我们要发布一则文章或者消息的时候我们需要在后台设置一下这段文本的格式还有字体的大小粗细颜色等样式，此时网页上会有一个设置这些信息的菜单或者是一个网页的文本编辑器，这个就是富文本编辑器的常见应用，如下图：

富文本编辑器不同于我们平时的文本编辑器，但是其功能确实和我们的平时使用的word的是类似的，只不过富文本编辑器设置是解决不会编写 HTML 的用户并需要设置各种文本格式在我们的网页上。程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里(当然付费的功能会更强大些)，方便用户编辑文章或信息。比较好的文本编辑器有kindeditor,fckeditor等。

二、富文本编辑器使用

接下来以wangeditor为例介绍富文本编辑器的使用步骤：

1.引入编辑器（多种引入方式）

包管理工具例如node下载：

• npm install wangeditor
• bower install wangEditor

下载源文件js引入（ https://github.com/wangfupeng1988/wangEditor/releases）：

<script src="/static/assets/plugins/wangEditor/wangEditor.min.js"></script>

在线cdn引入（https://www.bootcdn.cn/wangEditor/）：

• 网站链接选择版本复制引入即可

2.使用编辑器

（1）创建容器

<div id="wangeditor">
    <div ref="editorElem"></div>
</div>

（2）创建并且实例化组件

• vue的使用方法

//vue的使用
import E from "wangeditor”;//导入组件
// 相当于js的变量设置
data() {
return {
  editor: null,
}}
//methods里创建调用、或是mounted里面直接生产
this.editor = new E(_this.$refs.editorElem);//获取组件并构造编辑器
this.editor.create(); // 创建富文本实例

• js的使用方式

//js的使用
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()

• react使用方式

// 创建组件
<div id="wangeditor" ref={editor}></div>
// 组件声明
const editor = useRef();
useEffect(()=>{
//获取组件并构造编辑器
	const Edit = new E(editor.current); 
	Edit.create();
}[])

（3）基础配置

• 配置菜单

// 这是默认的菜单配置就是全部的功能、不需要的话将其去掉即可
this.editor.customConfig.menus = [
    'head',  // 标题
    'bold',  // 粗体
    'fontSize',  // 字号
    'fontName',  // 字体
    'italic',  // 斜体
    'underline',  // 下划线
    'strikeThrough',  // 删除线
    'foreColor',  // 文字颜色
    'backColor',  // 背景颜色
    'link',  // 插入链接
    'list',  // 列表
    'justify',  // 对齐方式
    'quote',  // 引用
    'emoticon',  // 表情
    'image',  // 插入图片
    'table',  // 表格
    'video',  // 插入视频
    'code',  // 插入代码
    'undo',  // 撤销
    'redo'  // 重复
    ]

• 自定义设置

// 自定义颜色
this.editor.customConfig.colors = [
"#000000",
"#333333",
];
// 自定义字体
this.editor.customConfig.fontNames = [
"PingFangSC",
];
//配置多种语言--就是将编辑器原本文字配置成你需要的文字、
//***链接文字一定要在链接的上面
this.editor.customConfig.lang = {
'设置标题': 'title',
'正文': 'p',
'链接文字': 'link text',
'链接': 'link',
'上传图片': 'upload image',
'上传': 'upload',
'创建': 'init'
// 还可自定添加更多
}

（4）常用功能设置

//设置编辑器内容
this.editor.txt.html(“yanyanyan”);
// 编辑器的事件，每次改变会获取其html内容（html内容是带标签的）
this.editor.customConfig.onchange = html => {
_this.formValidate.content = html;
};
// 设置编辑器层级
this.editor.customConfig.zIndex = 10;
// 去除复制过来文本的默认样式
this.editor.customConfig.pasteFilterStyle = false;
//用户点击富文本区域会触发onfocus函数执行
this.editor.customConfig.onfocus = function () {
        console.log("onfocus")
    }
// 将图片大小限制为 3M
this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
// 限制一次最多上传 5 张图片
this.editor.customConfig.uploadImgMaxLength = 5
//上传图片的错误提示默认使用alert弹出,也可以自定义用户体验更好的提示方式
editor.customConfig.customAlert = function (info) {
    // info 是需要提示的内容
    alert('自定义提示：' + info)
}

（5）本地上传图片
编辑器自带图片上传的网站链接图片，本地上传图片需要自己设置

// 上传图片到服务器,对应的是controller层的@RequestMapping("/upload")
this.editor.customConfig.uploadImgServer = "/api/file/upload”;//接口名称
//自定义name,接收的时候图片文件的那么用这个，对应的是参数中的MultipartFile upimg名称,这个名称即上传到浏览器的参数名称
this.editor.customConfig.uploadFileName = "file_key”;//这个需要和后台商量上传图片的名称
// 上传图片的结果反馈
this.editor.customConfig.uploadImgHooks = {
before: function(xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
// console.log("before:",xhr)
},
success: function(xhr, editor, result) {
// 图片上传并返回结果，图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
// console.log("success:",result)
},
fail: function(xhr, editor, result) {
// 图片上传并返回结果，但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
error: function(xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
customInsert: function(insertImg, result, editor) {
// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// insertImg 是插入图片的函数，参数editor 是编辑器对象，result 是服务器端返回的结果
// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
var url = result.result.remote_path;
insertImg(url);
// result 必须是一个 JSON 格式字符串！！！否则报错
}
};
// }

（6）常用 API
属性

• 获取编辑器的唯一标识： editor.id
• 获取编辑区域 DOM 节点： editor.$textElem[0]
• 获取菜单栏 DOM 节点： editor.$toolbarElem[0]
• 获取编辑器配置信息： editor.config
• 获取编辑区域 DOM 节点 ID： editor.textElemId
• 获取菜单栏 DOM 节点 ID： editor.toolbarElemId
• 获取菜单栏中“图片”菜单的 DOM 节点 ID： editor.imgMenuId

方法
选取操作

• 获取选中的文字： editor.selection.getSelectionText()
• 获取选取所在的 DOM 节点： editor.selection.getSelectionContainerElem()[0]
  • 开始节点： editor.selection.getSelectionStartElem()[0]
  • 结束节点： editor.selection.getSelectionEndElem()[0]
• 折叠选取： editor.selection.collapseRange()
• 更多可参见源码中定义的方法

编辑内容操作

• 插入 HTML： editor.cmd.do(‘insertHTML’, ‘< p>…< /p>’)
• 可通过editor.cmd.do(name, value)来执行document.execCommand(name, false, value)的操作

三、主流富文本编辑器推荐

1.TinyMCE

TinyMCE是一个开源的所见即所得的HTML编辑器，界面相当清新，界面模拟本地软件的风格，顶部有菜单栏。支持图片在线处理，插件多，功能非常强大，易于集成，并且拥有可定制的主题。支持目前流行的各种浏览器，它可以达到微软Word类似的编辑体验。

而且还是开源免费的，目前一直有人维护，这款编辑器使用的人非常多。

更多介绍及下载地址： https://www.tiny.cloud/docs/demo/full-featured/

2.CKEditor

Ckeditor也是一款非常经典的富文本编辑器，官方下载量过千万。它是在非常著名的FCkEditor基础上开发的新版本，FckEditor的用户现在基本都转移到Ckeditor了。

Ckeditor有高性能的实时预览，它特有行内编辑功能，使得编辑内容更加直观，仿佛是在编辑网页一样，有很强的可扩展性，被各大网站广泛运用。

更多介绍及下载地址： https://ckeditor.com/

3.UEditor

UEditor 是由百度出品的富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源免费。这款编辑器用过的人也非常多，功能非常全面，插件很多，还可以很方便插入百度地图，接入十分简单。

16年之后百度没有怎么更新了，不过现有的功能也足够用了。UEditor分为UE版（全功能版）和UM版（精简版），大家可以根据自己使用环境选择不同的版本。

更多介绍及下载地址： http://ueditor.baidu.com/website/

4.wangEditor

wangEditor轻量级，小巧实用，配置方便，使用简单。可以自定义皮肤功能，免费开源。用户数量也很多，尤其是用在一些轻型环境，比如论坛社区回帖。wangEditor是国人出品的开源项目。

更多介绍及下载地址： http://www.wangeditor.com/

5.kindeditor

KindEditor历史也很长了，用户数也不少，国内某公司出品。免费开源。界面类似于office word，界面和功能中规中矩，文档齐全，使用还算方便。

更多介绍及下载地址： http://kindeditor.net/demo.php

6.simditor

simditor是Tower平台使用的富文本编辑器，是一款轻量化的编辑器，界面简约，功能实用，插件不是很多，功能要求不高的可以使用。

虽然是国内出品，但文档是英文的。开源免费。

更多介绍及下载地址： https://simditor.tower.im/

7.bootstrap-wysiwyg

bootstrap-wysiwyg是基于Bootstrap的轻型、免费开源的富文本编辑器，界面简洁大方。使用需要先引入bootstrap。

bootstrap-wysiwyg这一长串像乱码一样的名字影响了它的推广和使用~ ~毕竟轻型使用环境还是很多的。

更多介绍及下载地址： http://mindmup.github.io/bootstrap-wysiwyg/

8.summernote

summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。summernote开源免费，该项目一直比较活跃，一直都有人在维护。

summernote同样依赖于jquery和bootstrap，使用前先引入这两项。

更多介绍及下载地址： https://summernote.org/

9.Froala

Froala是一款功能丰富的富文本编辑器，界面分类清晰，容易集成，容易升级，支持主流浏览器，具有行内编辑功能。Froala代码示例很多，可以集成在很多js框架里如React.js，Aurelia，Angular，Ionic，Django等。插件很多，易于扩充功能。

Froala是收费的，不过前端是开源的，如果要使用后台是要交费的（如果你使用国人强大的crack技能那就是另外一回事了~ ~）。目前有三个定价方式：基础版（239美元）、专业版（1199美元）和企业版（1999美元）。

更多介绍及下载地址： https://www.froala.com/wysiwyg-editor

10.Quill

Quill是轻型的编辑器，样式一般（黑白风），功能中等，它的代码高亮功能比较强，同样支持行内编辑模式，工具条可自定义。

开源免费，项目活跃，一直有人维护。

更多介绍及下载地址： https://quilljs.com/

11.FreeTextBox

FreeTextBox功能强大，前端支持主流浏览器，但后台只支持.NET。它的外观和使用风格都和微软 Word很类似。工具条可以定制，运行速度一般。FreeTextBox分为免费版和pro收费版，一般情况免费版本功能已经足够用了。

更多介绍及下载地址： http://freetextbox.com/

12.dhtmlxEditor

DHTMLX组件是一整套基于JS的UI库，功能强大，其中包含编辑器dhtmlxEditor。该编辑器可以直接集成到Angular，React和Vue.js框架中，该编辑器还同时支持Markdown和富文本。

支持普通视图和类似word一样的页面视图，支持全屏幕，工具支持自定义，包括工具条颜色和样式等。

dhtmlxEditor分为免费版和收费版，免费版具有绝大多数功能，而且免费版是开源的你可以在代码级别随便扩充。

更多介绍及下载地址： https://dhtmlx.com/docs/products/dhtmlxRichText/

13.eWebEditor

eWebEditor外观和使用风格都和微软 Word很类似，功能很多。工具条可以定制，运行速度很快。导入文件接口很多，支持word、excel、pdf、ppt直接导入，目前版本不支持代码高亮，不适合纯技术平台使用，适合内容编辑人员使用。

eWebEditor有很长的历史了，是典型的传统富文本编辑器，不论是界面，还是功能都比较传统。

eWebEditor是收费的，但也有免费的精简版，精简版没有后台功能。

更多介绍及下载地址： http://www.ewebeditor.net/demo/

后记

Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~