vue 文档编辑器插件quill-editor的使用记录（主要是图片上传功能的实现）

这里简单记录下在使用quill-editor过程中遇到的坑。和一些使用的事项。

官方文档点击这里：quilljs官方文档

安装什么的就不写了，自己去看。

1、引入所需的文件（前提是已经安装了quill包）

import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

 

2、工具条配置项，配置项可以根据自己需要的情况来使用

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"],
  ["blockquote", "code-block"],
  [{ header: 1 }, { header: 2 }],
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }],
  [{ indent: "-1" }, { indent: "+1" }],
  [{ direction: "rtl" }],
  [{ size: ["small", false, "large", "huge"] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }],
  [{ font: [] }],
  [{ align: [] }],
  ["link", "image"],
  ["clean"]
];

3、引用配置项

export default {
  data() {
    return {
      mulObj:'',
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: function(value) {
                if (value) {
                  document.querySelector("input[name='file']").click();
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          }
        }
      },
    };
  },
//组件注册
  components: {
    quillEditor,
  },
}

注意：这里对image进行了特殊处理，后面将通过添加的文件上传按钮来实现图片的文件上传。当点击quill中图片图标的时候将触发自定义按钮的点击事件

4、vue中的template部分

说明

1、这里的上传控件使用的是element-ui的上传控件，action属性是上传文件的服务器接口。这里根据自己的实际情况处理。也可以查看element-ui的官方文档。

2、quill-editor控件可以通过vue的双向数据绑定实现内容变化的监听，这里的mulObj就是文档编辑器的内容（html格式）。

3、ref属性是当前文档编辑器的一个标识，后面需要通过这个字段来获取文档编辑器。

4、options属性绑定是data中的配置项editorOption。

其他html代码部分需要自己补全，这里就不全部贴出来了

文档编辑器的界面如下：

5、接下来进行图片上传的处理

上面我们对图片点击事件进行了特殊处理，当点击文档编辑器的图片时其实触发的是的点击事件

当点击图片图标的时候，el-upload控件进行了往服务器上传图片的操作，如果图片上传成功就会调用success函数（:on-success="success"），这里不懂的小伙伴请移步element-ui官网。

接下来进行js逻辑逻辑部分。

  methods: {
    success(res, file, fileList) {
          let quill = this.$refs.lang.quill;
          let range = quill.getSelection();
            let length = range.index;
            quill.insertEmbed(length, "image", res.data);
            quill.setSelection(length + 1);
        }
    },
}

 获取文档编辑器对象

let quill = this.$refs.lang.quill;

 上面html部分有一个ref="lang"的属性，这里通过这种方式拿到文档编辑器对象。

获取当前光标的位置

let range = quill.getSelection();
let length = range.index;

插入图片（这里的res.data是服务器返回的图片路径）

quill.insertEmbed(length, "image", res.data);
quill.setSelection(length + 1);

由于我们对文档编辑器的内容进行了双向数据绑定，所以此时mulObj就是包含了各种样式和图片的html字符串。

 

以上就是基本步骤，这里记录方便以后查看。好记性不如烂笔头。