情景：
1、UEditor 依然是国内使用频率极高的所见即所得编辑器而 Vue 又有着广泛的使用，所以将两者结合使用，是很多 Vue 项目开发者的切实需求。
2、目前没有发现满足这种需求，而使用又很方便的 repo、有的可能也只是简单的暴露一个 UEditor 的实例，仍然需要开发者手动去调用 getContent，setContent，而通过 v-model 绑定数据也是很多人期待的方式。
于是，就有前人封装了双向绑定的UEditor 组件，使用起来便捷。UEditor 官方不再积极维护，并且作者也将持续优化和修复UEditor 停更带来的一些问题。
1.快速安装：
npm i vue-ueditor-wrap --save
#或者
yarn add vue-ueditor-wrap --save
2.下载UEditor对应的后端文件(上传文件相关)及插件配置文件
https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads
将下载的压缩包解压并重命名为 UEditor(只需要选择一个你需要的版本,比如 utf8-php),放入你项目的 static 目录下。
如果你使用的是 vue-cli 3.x，可以把 UEditor 文件夹放入项目的 public 目录下。
如果你使用的是webpack自己搭建的框架，暂时还没有告诉webpack做个static是静态资源文件目录，不需要被编译打包，只需要拷贝到生产环境中,可以在webpack配置下插件：
plugins: [
new CopyWebpackPlugin(
[
{
from: 'static',
to: './static'
}
]
)
]
3.引入VueUeditorWrap组件
import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
// 或者
const VueUeditorWrap = require('vue-ueditor-wrap') // CommonJS
你也可以通过直接引入 CDN 链接的方式来使用，它会暴露一个全局的 VueUeditorWrap 变量(具体如何使用你可以阅读作者的这篇博客或参考这个仓库)。
4.注册组件
components: {
VueUeditorWrap
}
// 或者在 main.js 里将它注册为全局组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap)
5.v-model绑定数据
data () {
return {
msg: '
Vue + UEditor + v-model双向绑定
',
myConfig: {
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 240,
// 初始容器宽度
initialFrameWidth: '100%',
// 上传文件接口(这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！)
serverUrl: 'http://35.201.165.105:8000/controller.php',
// UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
UEDITOR_HOME_URL: '/static/UEditor/'
}
}
}
6.效果
image.png
7.配置拓展(源码分析，二次开发)
通过查看作者封装的组件源码：node_modules\vue-ueditor-wrap\src\components\vue-ueditor-wrap.vue
我们可以发现作者是通过查询UEditor文件目录并调用了ueditor.config.js和ueditor.all.min.js文件
这也解释了为什么要在static创建UEditor文件目录的原因
查找静态文件夹下名称为UEditor文件夹路径
调用ueditor.config.js
调用ueditor.all.min.js
因此我们可以对ueditor.config.js和ueditor.all.min这两个文件进行修改和定制：
(一)字体种类的添加：
ueditor编辑器默认只提供了11中字体，而实际的应用中，这些字体还是太少，无法满足各种需求，所以需要进行字体种类的添加，
具体需要同步修改三个文件：ueditor.config.js、zh-cn.js、en.js，在fontfamily处添加需要的字体类型即可，操作如下：
ueditor.config.js
zh-cn.js
en.js
(二)修改字号显示方式为中文word字号显示方式 ：
1、打开ueditor.config.js,搜索“'fontsize':”，定位到如下代码：
// 'fontsize': [10, 11, 12, 14, 16, 18, 20, 24, 36]
2、在注释项下添加如下代码
'fontsize': [
{ name: '\u516d\u53f7', val: 10},
{ name: '\u5c0f\u4e94', val: 12},
{ name: '\u4e94\u53f7', val: 14},
{ name: '\u5c0f\u56db', val: 16},
{ name: '\u56db\u53f7', val: 18},
{ name: '\u5c0f\u4e09', val: 20},
{ name: '\u4e09\u53f7', val: 21},
{ name: '\u5c0f\u4e8c', val: 24},
{ name: '\u4e8c\u53f7', val: 29},
{ name: '\u5c0f\u4e00', val: 32},
{ name: '\u4e00\u53f7', val: 34},
{ name: '\u5c0f\u521d', val: 48},
{ name: '\u521d\u53f7', val: 56}
]
P.S：由于fontsize配置项接收的只有数字，没有接收name、val这样的对象集合，我们需要去修改方法中的源码
并且由于WEB字号低于10没有什么使用价值，仅添加10px以上的字体，名称可以自己定义，只要把中文转为UNICODE就行了(貌似不转换直接用中文字符串也可以)。
3.打开ueditor.all.js,搜索“editorui.fontsize”，定位到如下代码：
editorui.fontsize = function (editor, list, title) {
title = editor.options.labelMap['fontsize'] || editor.getLang("labelMap.fontsize") || '';
list = list || editor.options['fontsize'] || [];
if (!list.length) return;
var items = [];
for (var i = 0; i < list.length; i++) {
var sizename = list[i].name;
var size = list[i].val + 'px';
items.push({
label: sizename,
value: size,
theme: editor.options.theme,
renderLabelHtml: function () {
return '
' + (this.label || '') + '
';
}
});
}
将这段代码：
for (var i = 0; i < list.length; i++) {
var size = list[i] + 'px';
items.push({
label:size,
value:size,
改为：
for (var i = 0; i < list.length; i++) {
var sizename = list[i].name;
var size = list[i].val + 'px';
items.push({
label:sizename,
value:size,
可以看到思路就在于把原来以像素字号表示的简单的fontsize属性细化，模仿了font-family的键值对书写方式，添加name和val两个属性，再在下方的ui代码拼接的地方将细化后的sizename和name值分别输出。
【注意】：作者在UEditor插件中默认引入的是ueditor.all.min.js,但这是压缩过的代码，不方便编辑。我们可以把ueditor.all.js重命名为ueditor.all.min.js
这样在实际生成的编辑器实例中即可看到生效
字号效果
8.更多配置项说明