Vue + iview + quill （vue-quill-editor）富文本编辑器及插入自定义图片，样式调整

描述:  最近公司又这么一个需求，在form表单中对这个富文本编辑器列有必填的长度校验，然而在项目中img会转成base64格式的导致检验失败，因此需要我们自定义图片功能来解决这个问题。
 1.安装

npm install vue-quill-editor --save

npm install quill –save

 2.在所需页面进行按需引入
    创建文件组件 components/quill.vue
    部分代码如下：

<template>
  <div class="form-quill">
    <div class="i-quill" :class="classes" v-show="!disabled">
      <div ref="editor" :style="styles"></div>
    </div>
    <div v-show="disabled" v-html="value"></div>
    <Upload
      class="form-quill-upload"
      ref="uploadFileBtn"
      :action="uploadUrl"
      :format="format"
      :disabled="disabled"
      :maxSize="maxSize"
      :on-success="succUpload"
      :on-error="errorUpload"
      :show-upload-list="false"
      :before-upload="handleUpload"
      :on-format-error="formatError"
      :on-exceeded-size="exceededSize"
    >
      <Button type="primary" id="file" ref="uploadImgBtn">上传图片</Button>
    </Upload>
  </div>
</template>
<script>
    import Quill from "quill";
    import "quill/dist/quill.core.css";
    import "quill/dist/quill.snow.css";
    import "quill/dist/quill.bubble.css";
</script>

    效果图如下： （默认编辑器有很多icon ，各取所需）

配置项：放在data中

 options: {
        theme: "snow",
        bounds: document.body,
        debug: "warn",
        modules: {
          toolbar: [
            ["bold", "italic" /*, 'underline', 'strike'*/],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ size: ["small", false, "large", "huge"] }],
            [{ color: [] }, { background: [] }],
            //['blockquote', 'code-block'],
            [{ list: "ordered" }, { list: "bullet" }],
            // [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ indent: "-1" }, { indent: "+1" }],
            [{ align: [] }],
            [{ direction: "rtl" }],
            // [{ 'font': [] }],
            ["clean"],
            [/*'link', */ "image"]
          ]
        },
        placeholder: "内容...",
        readOnly: false
      }

这是用于美化的编辑栏代码:
  css部分：

<style lang="less" >
.form-quill {
  .i-quill-no-border {
    // .ql-toolbar.ql-snow {
    //   border: none;
    //   border-bottom: 1px solid #e8eaec;
    // }
    // .ql-container.ql-snow {
    //   border: none;
    // }
  }
  .form-quill-upload {
    display: none;
  }
  .ql-editor { // 调整编辑器高度
    height: 250px;
  }
  .avatar-uploader {
    display: none;
  }
  .editor {
    line-height: normal !important;
  }
  .editor .ql-container {
    height: 350px; /*设置输入框高度*/
  }
  .ql-editor.ql-blank::before {
    /* content: '请输入内容' !important; */
    font-style: normal;
    color: rgba(0, 0, 0, 0.3);
  }
  .ql-snow .ql-tooltip[data-mode="link"]::before {
    content: "请输入链接地址:";
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: "保存";
    padding-right: 0px;
  }
  .ql-snow .ql-tooltip::before {
    content: "访问此地址:";
  }
  .ql-snow .ql-tooltip a.ql-action::after {
    content: "编辑";
  }
  .ql-snow .ql-tooltip a.ql-remove::before {
    content: "移除超链接";
  }
  .ql-snow .ql-tooltip[data-mode="video"]::before {
    content: "请输入视频地址:";
  }
  .ql-snow .ql-picker{
    line-height: 24px;
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    content: "10px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    content: "18px";
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: "32px";
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "文本";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "标题1";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "标题2";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "标题3";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "标题4";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5";
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "标准字体";
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "衬线字体";
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    content: "等宽字体";
  }
}
</style>

  JS部分： 

// 标题
const titleConfigArray = [
  { Choice: ".ql-bold", title: "加粗" },
  { Choice: ".ql-italic", title: "斜体" },
  { Choice: ".ql-underline", title: "下划线" },
  { Choice: ".ql-header", title: "段落格式" },
  { Choice: ".ql-strike", title: "删除线" },
  { Choice: ".ql-blockquote", title: "块引用" },
  { Choice: ".ql-code", title: "插入代码" },
  { Choice: ".ql-code-block", title: "插入代码段" },
  { Choice: ".ql-font", title: "字体" },
  { Choice: ".ql-size", title: "字体大小" },
  { Choice: '.ql-list[value="ordered"]', title: "编号列表" },
  { Choice: '.ql-list[value="bullet"]', title: "项目列表" },
  { Choice: ".ql-direction", title: "文本方向" },
  { Choice: '.ql-header[value="1"]', title: "h1" },
  { Choice: '.ql-header[value="2"]', title: "h2" },
  { Choice: ".ql-align", title: "对齐方式" },
  { Choice: ".ql-color", title: "字体颜色" },
  { Choice: ".ql-background", title: "背景颜色" },
  { Choice: ".ql-image", title: "图像" },
  { Choice: ".ql-video", title: "视频" },
  { Choice: ".ql-link", title: "添加链接" },
  { Choice: ".ql-formula", title: "插入公式" },
  { Choice: ".ql-clean", title: "清除字体格式" },
  { Choice: '.ql-script[value="sub"]', title: "下标" },
  { Choice: '.ql-script[value="super"]', title: "上标" },
  { Choice: '.ql-indent[value="-1"]', title: "向左缩进" },
  { Choice: '.ql-indent[value="+1"]', title: "向右缩进" },
  { Choice: ".ql-header .ql-picker-label", title: "标题大小" },
  { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: "标题一" },
  { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: "标题二" },
  { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: "标题三" },
  { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: "标题四" },
  { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: "标题五" },
  { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: "标题六" },
  { Choice: ".ql-header .ql-picker-item:last-child", title: "标准" },
  { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: "小号" },
  { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: "大号" },
  { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: "超大号" },
  { Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },
  { Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },
  {
    Choice: '.ql-align .ql-picker-item[data-value="center"]',
    title: "居中对齐"
  },
  {
    Choice: '.ql-align .ql-picker-item[data-value="right"]',
    title: "居右对齐"
  },
  {
    Choice: '.ql-align .ql-picker-item[data-value="justify"]',
    title: "两端对齐"
  }
];
方法：
addQuillTitle() {
      for (let item of titleConfigArray) {
        let tip = document.querySelector(".i-quill " + item.Choice);
        if (!tip) continue;
        tip.setAttribute("title", item.title);
      }
 },
 init() {
      const editor = this.$refs.editor;
      // 初始化编辑器
      this.Quill = new Quill(editor, this.options);
      let toolbar = this.Quill.getModule("toolbar"); //获取工具栏模块
      let that = this;
      //对工具栏的image添加回调函数覆盖原本的方法
      toolbar.addHandler("image", () => {
        that.$refs.uploadImgBtn.$el.click();
      });
      // 默认值
      this.Quill.pasteHTML(this.currentValue);
      // 绑定事件
      this.Quill.on("text-change", (delta, oldDelta, source) => {
        const html = this.$refs.editor.children[0].innerHTML;
        const text = this.Quill.getText();
        const quill = this.Quill;
        // 更新内部的值
        this.currentValue = html;
        // 发出事件 v-model
        this.$emit("input", html);
        // 发出事件
        this.$emit("on-change", { html, text, quill });
      });
      // 将一些 quill 自带的事件传递出去
      this.Quill.on("text-change", (delta, oldDelta, source) => {
        this.$emit("on-text-change", delta, oldDelta, source);
      });
      // 监听光标事件
      this.Quill.on("selection-change", (range, oldRange, source) => {
        // debugger
        this.$emit("on-selection-change", range, oldRange, source);
      });
      // 监听编辑内容改变事件
      this.Quill.on("editor-change", (eventName, ...args) => {
        console.log("editor-change", eventName, args);
        this.$emit("on-editor-change", eventName, ...args);
      });
    },
调用：
 mounted() {
    this.init();
    this.addQuillTitle();
    console.log(this.value, this.disabled);
},

3、自定义图片功能（重点 也可扩展视频、文件）
 思路：1、写一个upload进行隐藏，然后用上传文件的默认点击方法去覆盖原有的方法
            2、在上传文件成功的回调中 处理业务逻辑
代码：具体代码上面以粘贴这里只提供思路

 

    fileUrl(id) {（服务器图片路径）
      return Setting.apiBaseURL + `${id}`;
    },
    succUpload(res, file, fileList) {
      this.clearLoading();
      debugger
      if (res.code === 200) {
        this.$Message.success("上传成功！");
        // 将图片插入需要获取当前光标的位置，参数为是否要求焦点在编辑器上
        // 获取光标位置对象，里面有两个属性，一个是index 还有 一个length，这里要用range.index，即当前光标之前的内容长度，然后再利用 insertEmbed(length, 'image', imageUrl)，
插入图片即可。
        let selection = this.Quill.getSelection(true);
        this.Quill.insertEmbed(
          selection.index,
          "image",
          this.fileUrl(res.result.id)
        );
        // 调整光标到最后
        this.Quill.setSelection(selection.index + 1);
      } else {
        this.$Message.error({
          content: res.message,
          duration: 5,
          closable: true
        });
      }
    },

扩展链接：

          源码编辑功能：https://blog.csdn.net/w390058785/article/details/84337859?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param
          基于element的富文本编辑：https://blog.csdn.net/maggie_live/article/details/88695477?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param