ueditor图片上传方式处理

最近项目里需要用到富文本编辑器，同事选择里百度出的ueditor，但是里面自带的图片上传功能需要后台配合，配置成服务器地址，和我们实际情况不是太符合，于是另想办法，搞定图片上传。

首先重写里toolbars配置。最重要的是要把原先的上传图片功能按钮去掉，下面是我用到的配置项

toolbars: [
   [
     "fullscreen",
     "source",
     "undo",
     "redo",
     "bold",
     "italic",
     "underline",
     "fontborder",
     "strikethrough",
     "superscript",
     "subscript",
     "removeformat",
     "formatmatch",
     "autotypeset",
     "blockquote",
     "pasteplain",
     "|",
     "forecolor",
     "backcolor",
     "insertorderedlist",
     "insertunorderedlist",
     "selectall",
     "cleardoc",
     "mergeright", //右合并单元格
     "mergedown", //下合并单元格
     "deleterow", //删除行
     "deletecol", //删除列
     "splittorows", //拆分成行
     "splittocols", //拆分成列
     "splittocells", //完全拆分单元格
     "deletecaption", //删除表格标题
     "inserttitle", //插入标题
     "mergecells", //合并多个单元格
     "deletetable", //删除表格
     "cleardoc", //清空文档
     "insertparagraphbeforetable", //"表格前插入行"
     "fontfamily", //字体
     "fontsize", //字号
     "paragraph", //段落格式
     "inserttable", //插入表格
     "edittable", //表格属性
     "edittd", //单元格属性
     "link" //超链接
   ]
 ]

更多配置可参考官网

初始化ueditor的时候触发一个方法，因为我的项目是用vue写的，而且封装了一层ueditor,所以就对外暴露了一个beforeInit方法。

// 添加自定义弹窗
    addCustomDialog(editorId) {
      let that = this;
      window.UE.registerUI(
 "test-dialog",
 function(editor, uiName) {
   // 参考http://ueditor.baidu.com/doc/#COMMAND.LIST
   var btn = new window.UE.ui.Button({
     name: "dialog-button",
     title: "上传图片",
     cssRules: `background-image: url('/image/upload.png') !important;background-size: cover;`,
     onclick: function() {
// 渲染dialog
that.dialogVisible = true;
editor.execCommand(uiName);
     }
   });

   return btn;
 },
 100 ,
 editorId 
      );
    }

其实就是在toolbar工具栏后面又加了一个自定义的按钮，实现上传功能。

弹窗我用的是element的弹窗，使用方式参考element官网弹窗。并且使用了element的upload上传组件

      
 
 
   将文件拖到此处，或
   点击上传
 
 
   只能上传jpg/png文件，且不超过5M
 
      
    

关键的就是上传成功后需要触发uploadFile方法，将上传成功的图片插入到富文本编辑器中

uploadFile(file) {
//关键
      let editor = document.querySelector(".edui-default").getAttribute("id");
      window.UE.getEditor(editor).execCommand("insertimage", {
 src: file.url,
 width: "100",
 height: "100"
      });
      this.dialogVisible = false;
    },
    // eslint-disable-next-line no-unused-vars
    uploadImageSuccess(response, file, fileList) {
      if (response) {
 this.$message({
   message: "上传成功",
   type: "success"
 });
 let fileObj = {
   name: response.originalName,
   url: response.url
 };
 // this.fileList.push(fileObj);
 this.uploadFile(fileObj);
      } else {
 this.$message({
   message: "上传失败",
   type: "warning"
 });
      }
    }

大功告成，搞定！