富文本

<div class="editor" ref="editor" :style="styles"></div>

  options: {
    theme: "snow",
    bounds: document.body,
    debug: "warn",
    modules: {
      // 工具栏配置
      toolbar: [
        ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
        ["blockquote", "code-block"],                    // 引用  代码块
        [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
        [{ indent: "-1" }, { indent: "+1" }],            // 缩进
        [{ size: ["small", false, "large", "huge"] }],   // 字体大小
        [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
        [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
        [{ align: [] }],                                 // 对齐方式
        ["clean"],                                       // 清除文本格式
        ["link", "image", "video"]                       // 链接、图片、视频
      ],
    },
    placeholder: "请输入内容",
    readOnly: this.readOnly,
  },
  
  
    init() {
  const editor = this.$refs.editor;
  this.Quill = new Quill(editor, this.options);
  editor.quill.enable(false)
  // 如果设置了上传地址则自定义图片上传事件
  if (this.type == 'url') {
    let toolbar = this.Quill.getModule("toolbar");
    toolbar.addHandler("image", (value) => {
      this.uploadType = "image";
      if (value) {
        this.$refs.upload.$children[0].$refs.input.click();
      } else {
        this.quill.format("image", false);
      }
    });
  }
  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;
    this.$emit("input", html);
    this.$emit("on-change", { html, text, 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) => {
    this.$emit("on-selection-change", range, oldRange, source);
  });
  this.Quill.on("editor-change", (eventName, ...args) => {
    this.$emit("on-editor-change", eventName, ...args);
  });
},