2020-03-03 Vue快速部署UEditor富文本编辑器

情景：

1、UEditor 依然是国内使用频率极高的所见即所得编辑器而 Vue 又有着广泛的使用，所以将两者结合使用，是很多 Vue 项目开发者的切实需求。
2、目前没有发现满足这种需求，而使用又很方便的 repo、有的可能也只是简单的暴露一个 UEditor 的实例，仍然需要开发者手动去调用 getContent，setContent，而通过 v-model 绑定数据也是很多人期待的方式。

于是，就有前人封装了双向绑定的UEditor 组件，使用起来便捷。UEditor 官方不再积极维护，并且作者也将持续优化和修复UEditor 停更带来的一些问题。

插件地址(有详细说明)：https://github.com/HaoChuan9421/vue-ueditor-wrap

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)

<script src="https://cdn.jsdelivr.net/npm/vue-ueditor-wrap@latest/lib/vue-ueditor-wrap.min.js"></script>

5.v-model绑定数据

<vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
data () {
  return {
    msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
    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 '<div class="edui-label %%-label" style="line-height:1;font-size:' +
              this.value + '">' + (this.label || '') + '</div>';
          }
        });
      }

将这段代码：

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.更多配置项说明

完整配置选项查看 ueditor.config.js 源码或 官方文档