vue中使用ueditor，并二次开发

站长

2022年12月06日 15:39 · 阅读数 18

如何在vue中使用Ueditor富文本编辑器

插件安装

npm i vue-ueditor-wrap@2.x

注：vue-editor-wrap非UEditor的vue版本，仅是vue组件

下载UEditor 在官网中选择任意版本下载即可

并将解压后的文件夹重命名为“UEditor”，放置在静态资源目录下

vue中使用ueditor，并二次开发

引入vueUeditorWrap组件

import VueUeidtorWrap from 'vue-ueditor-wrap'; ES6 Module
// or
const VueUeditorWrap = require('vue-ueditor-wrap'); CommonJS

注册组件

components: {
    VueUeditorWrap;
}
// or 注册为全局组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap);

v-model 绑定数据

<vue-wrap-ueditor-wrap v-model="msg"></vue-ueditor-wrap>

data(){
    return {
        msg: "<h1>hello ueditor</h1>"
    }
}

二次开发（替换原有上传图片功能，在编辑器中直接上传图片）

<vue-ueditor-wrap
  editor-id="ueditor"
  v-model="msg"
  @before-init="beforeInit"
></vue-ueditor-wrap>

<input
  @change="selectedFile"
  style="visibility: hidden; height: 0; position: absolute"
  type="file"
  :accept="acceptType"
  name
  id="inputFile"
/>

before-init 事件说明

before-init 在 UEditor 相关的资源已经加载完毕之后、编辑器初始化之前触发。你可以在此时机，通过操作 window.UE 对象，来进行诸如添加自定义按钮、弹窗等的二次开发。

// 资源加载完毕
beforeInit() {
  this.ueditor = UE;
  this.initUeditor();
},

registerUI API说明

UE.registerUI('uiname', function(editor, uiname) {
    //do something
}, [index, [editorId]]);

uiname,是你为新添加的UI起的名字，这里可以是1个或者多个，“uiname”后者是“uiname1 uiname2 uiname3”
function，是实际你要做的事情，这里提供两个参数，editor是编辑器实例，如果你有多个编辑器实例，那每个编辑器实例化后，都会调用这个function,并且把editor传进来,uiname,你为ui起的名字，如果前边你添加的是多个的化，这里function会被调用多次，并且将每一个ui名字传递进来.如果函数返回了一个UI 实例，那这个UI实例就会被默认加到工具栏上。当然也可以不返回任何UI。比如希望监控selectionchange事件，在某些场景下弹出浮层，这时就不需要返回任何UI.
index,是你想放到toolbar的那个位置，默认是放到最后
editorId,当你的页面上有多个编辑器实例时，你想将这个ui扩展到那个编辑器实例上，这里的editorId是给你编辑器初始化时，传入的id,默认是每个实例都会加入你的扩展

// 二次开发，自定义按钮
initUeditor() {
    let ueditor = this.ueditor;
    let that = this;
    
    ueditor.registerUI(
    "selectimage", // 按钮名称
    function (editor, uiName) {
      //注册按钮执行时的command命令，使用命令默认就会带有回退操作
      editor.registerCommand(uiName, {
        execCommand: function () {
          //   alert("execCommand:" + uiName);
        },
      });
      //创建一个button
      var btn = new UE.ui.Button({
        //按钮的名字
        name: uiName,
        //提示
        title: "选择图片",
        //添加额外样式,指定icon图标,这里默认使用一个重复的icon
        cssRules: "background-position: -380px 0;",
        //点击时执行的命令
        onclick: function () {
          //这里可以不用执行命令,做你自己的操作也可
          editor.execCommand(uiName);
          that.acceptType = "image/*";
          that.uploadType = 0;
          setTimeout(function () {
            that.handleOpenFile();
          }, 1);
        },
      });

      //当点到编辑内容上时，按钮要做的状态反射
      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;
    },
    19, // 放置在toolbar的位置
    ["ueditor"]
  );
}

打开文件

// 打开文件
handleOpenFile() {
  let input = document.getElementById("inputFile");
  // 解决同一个文件不能监听的问题
  input.addEventListener(
    "click",
    function () {
      this.value = "";
    },
    false
  );
  // 点击input
  input.click();
},

选择好文件，根据实际调用上传方法或执行其它操作即可

 // 选择好文件
selectedFile($event) {
  const file = $event.target.files[0];

  // 实际的上传方法
  this.uploadFile(file);
}