vue中，ueditor百度富文本编辑器换肤、集成秀米、自定义按钮、弹窗

前言：ueditor是百度开源的一款富文本编辑器，还是比较流行的，之前有写过一篇vue后台管理项目中使用froala-editor富文本编辑器教程，froala-editor是一个收费的编辑器，主题皮肤都挺好看的，并且支持v-model,十分的方便，但是想要集成第三方的编辑器就不太行了，比如集成秀米。看个人需求吧，ueditor百度编辑器的默认主题皮肤真心丑，我是看不下去，所以决定换肤！！先上两张对比图～

换肤前

换肤后

1. 先去ueditor官网按照需求下载

image.png

2. 下载解压后名字改成UEditor，丢到vue项目中的public目录下（或者static下）

image.png

3. 安装vue-editor-wrap

cnpm i vue-ueditor-wrap -S
//引入组件
import VueUeditorWrap from 'vue-ueditor-wrap'  //es6
//注册组件
components: {
   VueUeditorWrap
},
//template
 
// data
  msg: '',
  myConfig: {
  // 编辑器不自动被内容撑高
  autoHeightEnabled: false,
  // 初始容器高度
  initialFrameHeight: 500,
  // 初始容器宽度
  initialFrameWidth: '100%',
  // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
  serverUrl: 'http://35.201.165.105:8000/controller.php',
  // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
  UEDITOR_HOME_URL: '/UEditor/'
}

没有失误的话，是这个样子的。

image.png

4. 接下来就是换肤了。

换肤也比较简单，就是重写css，在 ueditor.config.js中，把 theme:'default'的注释打开，修改成 theme:'notadd'，然后把准备好的css丢到 public/UEditor/themes下,在public/UEditor/themes/iframe.css中添加

img {
  max-width: 100%;
  height: auto;
}

像这样。

image.png

ps:皮肤文件+v 1115009958 索取,不是无偿的，请知悉

然后编辑器就变成了这个样子。

image.png

5.自定义按钮和弹窗

vue-ueditor-wrap v-model="msg" :config='myConfig'>
改成
vue-ueditor-wrap v-model="msg" :config='myConfig' @ready="ready" @before-init="addCustomButtom">
//data
editor:{},
myConfig: {
        toolbars: [
          [
            'fullscreen',//全屏
            'source',//源码
            'undo', //撤销
            'redo', //前进
            'bold', //加粗
            'italic', //斜体
            'underline', //下划线
            'strikethrough', //删除线
            'fontborder', //字符边框
            'formatmatch', //格式刷
            // 'fontfamily', //字体
            'fontsize', //字号
            'justifyleft', //居左对齐
            'justifycenter', //居中对齐
            'justifyright', //居右对齐
            // 'justifyjustify', //两端对齐
            'insertorderedlist', //有序列表
            'insertunorderedlist', //无序列表
            // 'lineheight',//行间距
          ]
        ],
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 500,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: 'http://35.201.165.105:8000/controller.php',
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: '/UEditor/'
      },
//methods
ready(editorInstance)  // 富文本初始化完成触发
  this.editor = editorInstance
},
// 添加自定义按钮
    addCustomButtom(editorId) {
      let _this = this
      window.UE.registerUI('test-button', function (editor, uiName) {
        // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
        editor.registerCommand(uiName, {
          execCommand: function () {
            let html = ``
            editor.execCommand('inserthtml', html);
          }
        });

        // 创建一个 button
        var btn = new window.UE.ui.Button({
          // 按钮的名字
          name: uiName,
          // 提示
          title: '上传图片',
          // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
          cssRules: "background-image: url('http://erkong.ybc365.com/2644220200815163758435.png') !important;background-size: cover;",
          // 点击时执行的命令
          onclick: function () {
            // 这里可以不用执行命令，做你自己的操作也可
            _this.editor.execCommand('inserthtml', '插入到编辑器的内容');
          }
        });

        // 当点到编辑内容上时，按钮要做的状态反射
        editor.addListener('selectionchange', function () {
          var state = editor.queryCommandState(uiName);
          if (state === -1) {
            btn.setDisabled(true);
            btn.setChecked(false);
          } else {
            btn.setDisabled(false);
            btn.setChecked(state);
          }
        });

        // 因为你是添加 button，所以需要返回这个 button
        return btn;
      }/* 指定添加到工具栏上的哪个位置，默认时追加到最后 */ /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */);
    },
    // 添加自定义弹窗
    addCustomDialog(editorId) {
      window.UE.registerUI('test-dialog', function (editor, uiName) {
        // 创建 dialog
        var dialog = new window.UE.ui.Dialog({
          // 指定弹出层中页面的路径，这里只能支持页面，路径参考常见问题 2
          iframeUrl: '/customizeDialogPage.html',
          // 需要指定当前的编辑器实例
          editor: editor,
          // 指定 dialog 的名字
          name: uiName,
          // dialog 的标题
          title: '这是一个自定义的 Dialog 浮层',
          // 指定 dialog 的外围样式
          cssRules: 'width:500px;height:200px;',
          // 如果给出了 buttons 就代表 dialog 有确定和取消
          buttons: [
            {
              className: 'edui-okbutton',
              label: '确定',
              onclick: function () {
                dialog.close(true);
              }
            },
            {
              className: 'edui-cancelbutton',
              label: '取消',
              onclick: function () {
                dialog.close(false);
              }
            }
          ]
        });

        // 参考上面的自定义按钮
        var btn = new window.UE.ui.Button({
          name: 'dialog-button',
          title: '打开秀米',
          cssRules: `background-image: url('/test-dialog.png') !important;background-size: cover;`,
          onclick: function () {
            // 渲染dialog
            dialog.render();
            dialog.open();
          }
        });

        return btn;
      } /* 指定添加到工具栏上的那个位置，默认时追加到最后 */ /* 指定这个UI是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */);
    },
//main.js
//引入这两个文件，否则自定义的按钮不出现图标
import '../public/UEditor/ueditor.config'
import '../public/UEditor/ueditor.all.js'

这样就出现了自定义的按钮

image.png

在这里你可以写你的逻辑，弹窗同理，就不多说了

image.png

image.png

6.下面开始集成秀米

第一步：下载文件 xiumi-ue-dialog-v5.js和xiumi-ue-v5.css和xiumi-ue-dialog-v5.html和 xiumi-ue-internal.js,点这里可以打包下载

第二步：将下载的压缩文件解压，把里面的文件丢到UEditor/dialogs里

image.png

第三步：修改 xiumi-ue-dialog-v5.html，引入 xiumi-ue-internal.js

image.png

第四步：修改ueditor.config.js

 xssFilterRules: false  //本来是true，改成false
 inputXssFilter: false  //本来是true，改成false
 outputXssFilter: false  //本来是true，改成false
 article: ['style'],   //本来是[ ]，改成  ['style']
 section: ['class',"style"], //本来是[ ] ，改成  ['class',"style"]
 img: ['style', 'src', 'alt', 'title', 'width', 'height', 'id', '_src', '_url', 'loadingclass', 'class', 'data-latex','style','word_img']  //后面多加两个值'style','word_img'

 还有其他的，看自己需求更改配置

第五步： 在main.js中引入基本文件

//引入必要的文件 集成秀米所需

import '../public/UEditor/dialogs/xiumi-ue-dialog-v5'
import '../public/UEditor/dialogs/xiumi-ue-v5.css'

最后是这样

image.png

image.png

image.png

教程到此结束，交流+v 1115009958

补充 ：ueditor.all.js

options.cssRules = '.edui-notadd  .edui-for-'+ btnName +' .edui-icon {'+ cssRules +'}' //.edui-default 改成  .edui-notadd

options.cssRules = '.edui-notadd .edui-for-'+ name +' .edui-dialog-content  {'+ cssRules +'}' //.edui-default 改成  .edui-notadd
//notadd/css
注释掉
/* .edui-notadd .edui-toolbar .edui-button .edui-icon::before,
.edui-notadd .edui-toolbar .edui-menubutton .edui-icon::before,
.edui-notadd .edui-toolbar .edui-splitbutton .edui-icon::before {
    display: none;
} */