vue-quill富文本编辑器插入img标签时自定义属性

最近被quill.js这个富文本编辑器折磨了好几天，最终也算是完成需求。现描述一下这次遇到的需求时什么： 产品说需要在富文本编辑器加入一个图文混排的功能（图片需要支持缩放、并且图片与文字需要居中对齐）。之前只是文字并没有上传图片的功能。在拿到需求之后觉得很简单，就是在富文本编辑器新增一个图片上传功能。之后在开发的过程中还是遇到了好多问题。下面详细的给大家讲解一下。希望可以帮助到大家。
1、首先需要解决的事图片上传以及缩放功能。实现步骤。

      editorOption: {
        theme: "snow", // 主题
        placeholder: this.isStem
          ? "由于组卷时自动生成题号，建议录入题干时不带题号"
          : "",
        modules: {
          imageDrop: true, // 拖动加载图片组件。
          imageResize: {
            //调整大小组件。
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white"
            },
            modules: ["Resize", "DisplaySize", "Toolbar"]
          },
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // toggled buttons
              [{ script: "sub" }, { script: "super" }],
              [{ align: [] }],
              ["image"]
            ],
            handlers: {
              image: value => {
                if (value) {
                  this.$refs[this.uploadId].$refs["commonUpload"].$refs[
                    "uploadFile"
                  ].$children[0].$refs.input.click();
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          }
        }
      }

这个object是富文本配置的对象，在toolbar.container加入[’image‘]即可在工具栏中调出上传图片的按钮。如果使用默认的上传图片最终会返回一个base64的特别长的字符串，不利于后端存储。所以这时我们都应该用本公司的上传接口，获取其返回的图片访问地址，然后在插入到富文本中即可实现。

在handlers定义一个image的key，其对应的函数就是我们点击工具栏之后响应的函数，这在里我让他点击了隐藏的上传按钮，在上传成功的回调函数里我们需要做的是把图片的url插入到富文本中，代码如下：

 // 获取光标所在位置
        let length = this.editor.selection.savedRange.index; //获取光标位置
        if (length == 0) {
          length = this.editor.getLength();
        }
        // 插入图片，res为服务器返回的图片链接地址
        this.editor.insertEmbed(
          length,
          "image",
          "https://kz-teaching-test.oss-cn-beijing.aliyuncs.com/" + e[0].url
        );
        // 调整光标到最后
        this.editor.setSelection(length + 1);

这里的this.editor 就是quill对象，可以根据自己定义的更换名称。如果页面中存在多个富文本那么就需要根据唯一标识来区分不然会作用域混乱。

2、如何实现图片的缩放：

import { ImageDrop } from "quill-image-drop-module";
import ImageResize from "quill-image-resize-module";
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);
// 下方内容放到 options.modules下即可，上方有整体的options的定义
imageDrop: true, // 拖动加载图片组件。
 imageResize: {
   //调整大小组件。
   displayStyles: {
     backgroundColor: "black",
     border: "none",
     color: "white"
   },
   modules: ["Resize", "DisplaySize", "Toolbar"]
 },

如果是vue-cli3以后的版本，在引入这些之后我们还需要在vue.config.js引入

  plugins: [
        new webpack.ProvidePlugin({
            // 在这儿添加下面两行
            'window.Quill': 'quill/dist/quill.js',
            'Quill': 'quill/dist/quill.js'
    })
    ]

3、在解决了图片上传之后，还有一个是图片和文字居中显示的功能。默认的文字和图片在一起的话，他们是图片和文字的底部相对齐。这里设计到一个属性那就是 vertical-align。我们看一下默认的情况以及更改这个属性之后的情况：

默认是底部对齐，我们更改为 vertical-align：middle.之后

我们可以发现他是居中对齐了。但是如何才能在插入标签的给img标签加入这个css属性呢，经过研究发现这个insertEmebd这个api不支持添加属性，如果需要的话需要自定义一下，把这个类扩展一下代码如下：

var BlockEmbed = Quill.import('blots/block/embed')
         class ImageBlot extends BlockEmbed {
          static create(value) {
            let node = super.create();
            node.setAttribute('src', value.url);
            node.setAttribute('controls', value.controls)
            node.setAttribute('width', value.width)
            node.setAttribute('height', value.height)
            return node;
        }

        static value(node) {
            return{
                url:node.getAttribute('src'),
                controls:node.getAttribute('controls'),
                width: node.getAttribute('width'),
                height:node.getAttribute('height')
            }
         }
      }
      ImageBlot.blotName = 'image';
      ImageBlot.tagName = 'img';

   // 使用方式
  quill.insertEmbed(range.index, 'image',{     
  url:url,heigth:'',widht:''  })                                                                                                  
 // 这样我们就可以添加富文本的时候给他定义属性了，但是他会换行，这个没有解决，解决了的小伙伴可以告诉我一下。

参考链接：
quill.js.com
https://quilljs.com/guides/cloning-medium-with-parchment/#dividers