Recently, we need to use a rich text editor in the project. My colleague chose uEditor from Baidu, but the image uploading function in it needs background coordination and is configured as the server address, which is not quite consistent with our actual situation, so we have to find another way to complete the image uploading.

Override configuration item

Start by rewriting the toolbars configuration. The most important thing is to get rid of the upload image button. Here are the configuration items I used

toolbars: [
          [
            "fullscreen"."source"."undo"."redo"."bold"."italic"."underline"."fontborder"."strikethrough"."superscript"."subscript"."removeformat"."formatmatch"."autotypeset"."blockquote"."pasteplain"."|"."forecolor"."backcolor"."insertorderedlist"."insertunorderedlist"."selectall"."cleardoc"."mergeright", // Right merge cells"mergedown"// Merge cells"deleterow"// Delete rows"deletecol"// Delete columns"splittorows"// Split into rows"splittocols"// Split into columns"splittocells"// Split the cell completely"deletecaption"// Delete the table title"inserttitle"// Insert the title"mergecells", // Merge multiple cells"deletetable"// Delete the table"cleardoc"// Empty the file"insertparagraphbeforetable", / /Insert row before table
            "fontfamily", / / font"fontsize", / / font size"paragraph", // Paragraph format"inserttable"// Insert table"edittable"// Table attributes"edittd"// Cell attributes"link"// hyperlink]]Copy the code

More configurations can be found on the official website

Add an initialization method

A method is triggered when initializing the UEditor, because my project is written in VUE and encapsulates a layer of the UEditor, exposing a beforeInit method.

<fw-ueditor-wrap
  v-model="mainBody"
  :config="myConfig"
  @beforeInit="addCustomDialog"
  :key="1"
></fw-ueditor-wrap>
Copy the code
// Add custom popover addCustomDialog(editorId) {let that = this;
      window.UE.registerUI(
        "test-dialog".function(editor, uiName) {/ / reference http://ueditor.baidu.com/doc/#COMMAND.LIST
          var btn = new window.UE.ui.Button({
            name: "dialog-button",
            title: "Upload picture",
            cssRules: `background-image: url('/image/upload.png')! important; background-size: cover; `, onclick:function() {// render dialog that. DialogVisible =true; editor.execCommand(uiName); }});returnbtn; }, 100 /* specifies the location to be added to the toolbar, by default to the last */, editorId /* specifies which editor instance the UI is on, by default all editors on the page will add this button */); }Copy the code

Add a custom button to the toolbar for uploading.

Element popover Settings

I am using the Element popover, using the same method as the element official website popover. And uses Element’s Upload upload component

<el-dialog
      title="Upload picture"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-upload
        class="upload-demo"
        drag
        accept=".png, .jpg"
        :headers="headers"
        :action="uploadAddr"
        :beforeUpload="beforeAvatarUpload"
        :on-success="uploadImageSuccess"
        :on-error="uploadImageError"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text"> drag the file here, or <em> click upload </em> </div> <div class="el-upload__tip" slot="tip"</div> </el-upload> </el-dialog>Copy the code

The key is to trigger the uploadFile method to insert the uploaded image into the rich text editor

UploadFile (file) {// keylet 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: "Upload successful".type: "success"
        });
        let fileObj = {
          name: response.originalName,
          url: response.url
        };
        // this.fileList.push(fileObj);
        this.uploadFile(fileObj);
      } else {
        this.$message({
          message: "Upload failed".type: "warning"}); }}Copy the code

We’re done! We’re done!