目前，适用于vue的几个比较大的富文本框编辑器主要有Quill，wangEditor，TinyMCE等等，其他的编辑器的社区环境相对没那么完善，大影响产品的稳定性、扩展性。到时候啥啥都实现不了，哪儿哪儿都有问题，会被 PM 鄙视：“人家 xxx 咋能行。其次，实际开发环境中最关键的一步就是二次开发，自定义开发(不是每个产品都是人)，因此选择社区较大的富文本插件将会省下很多时间。
TinyMCE
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。
优势：
- 官方文档：tinymce.ax-z.cn/
- 插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）
- 接口丰富，可扩展性强，有能力可以无限拓展功能
- 界面好看，符合现代审美
- 提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
- 对标准支持优秀（自v5开始）
- 官方中文语言包：tinymce.ax-z.cn/static/tiny…
demo
tinymce.init({
selector: '#tinydemo', //容器，可使用css选择器
language:'zh_CN', //调用放在langs文件夹内的语言包
toolbar: false, //隐藏工具栏
menubar: false, //隐藏菜单栏
inline: true, //开启内联模式
plugins: [ 'quickbars','link','table' ], //选择需加载的插件
//选中时出现的快捷工具，与插件有依赖关系
quickbars_selection_toolbar: 'bold italic forecolor | link blockquote quickimage',
});
自定义插件
ax_wordlimit —— 字数限制插件
- 下载插件：ax_wordlimit.zip
- 使用方法：将解压得到的文件夹，放到TinyMCE主目录下的plugins文件夹内。
- 作用：这是一个实时判断编辑器文字超过设定后触发回调的插件。
简单说就是：当超过字数限制后执行一个自定义函数。（没错，机智的我将这个限制动作甩给了你们！）
限制字数demo
tinymce.init({
selector: '#tinydemo',
plugins: "code ax_wordlimit",
toolbar: "code",
ax_wordlimit_num:40,
ax_wordlimit_callback: function(editor,txt,num){
tipsJS('当前字数：' + txt.length + '，限制字数：' + num);
}
});
图片上传
要使TinyMCE能够上传图片，需要如下几步：
第1步：上传图片，首先要启用图片插件
在plugins参数中把image加进去。
第2步：在工具栏显示图片工具按钮
在toolbar参数中把image加进去。
此时，点图片按钮是没有上传选项的，只能添加图片地址。
第3步：加入配置参数images_upload_url
此参数用于指定一个接受上传文件的后端处理程序地址，例如：
images_upload_url: '/demo/upimg.php',
如果返回的地址是相对路径，还有一个参数images_upload_base_path，可以给相对路径指定它所相对的基本路径。
images_upload_base_path: '/demo',
最后如下方示例：
tinymce.init({
selector: '#tinydemo',
language:'zh_CN',
plugins: 'image',
toolbar: 'image',
images_upload_url: '/demo/upimg.php',
images_upload_base_path: '/demo',
});
在项目应用中，会经常使用图片上传插件。但是并不能满足所有的业务需求，因此我使用原生js结合富文本框暴露出来的api，重写了一个自定义上传图片插件。
首先，我们了解一下几个重要的api：
setup
registrationEssential编辑器配置
顾名思义这是跟plugins以及language同级的一个富文本框配置项。
registrationEssential编辑器配置，包括“选择器”和“插件”键。此选项允许您指定将在呈现TinyMCE编辑器实例之前执行的回调。
要指定设置回调，请提供带有JavaScript函数的设置选项。此函数应该有一个参数，它是对正在设置的编辑器的引用。
此设置的一个常见用例是向TinyMCE添加编辑器事件。例如，如果您想向TinyMCE添加单击事件，则可以通过设置配置设置添加它。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
setup: function (editor) {
editor.on('click', function () {
console.log('Editor was clicked');
});
}
});
tinymce.editor.ui.Registry
在setup配置项中，设置有参数的回调函数，此处的参数就是富文本框实例，可通过此实例使用挂载在它身上的函数和属性。
addButton(name:String, obj:Toolbar.ToolbarButtonSpec):void
注册一个新的工具栏按钮，该按钮在通过键盘导航控件单击或激活时执行命令。
自定义图片插件源码：
const image_t = (editor) => {
editor.ui.registry.addButton("image-t", {
// text: "上传图片",
icon: "image",
onAction: () => {
const dialogConfig = {
title: "上传图片",
body: {
type: "panel",
items: [{
type: "dropzone",
name: "fileinput",
}, ],
},
buttons: [],
onChange(api) {
api.block("上传中……");
let file = api.getData().fileinput[0]; // 获取FileReader实例
const formdata = new FormData()
formdata.append('file', file)
//发请求
axios(parmas).then(res => {
api.setData({ src: { value: res.url, meta: {} } })
editor.execCommand(
"mceInsertContent",
false,
`<div><img src=${img} alt='请删除无效图片'/></div>`
);
})
api.unblock();
api.close();
},
};
editor.windowManager.open(dialogConfig);
},
})};
生活艰难，有用到的小伙伴麻烦给我一个赞，还有改进的地方也可以在评论区提出来。
