vue-quill-editor富文本工具增强模块的使用

Posted 2021-09-04 晕晕大作战

vue-quill-editor富文本工具增强模块的使用

vue-quill-editor富文本增强模块包括quill-image-extend-module（上传图片）、\'quill-image-resize-module （图片大小调整）
https://www.kancloud.cn/liuwa... 这是官方文档，但是示例里关于action的部分是个字符串url，不知道怎么用对应axio的api，所以从其他博客找到的示例再修改的。

改造需求

若依通知公告功能使用的基本的quill组件。里面好像是支持action配置url，上传图片到服务器，但是没看到示例怎么用。
所以采用quill的增强组件去实现。

代码

Editor index.vue(上传组件)的代码直接贴出来（参考的某位的博客的内容，具体忘了谁的）

<template>
  <div>
    <quill-editor
      ref="Editor"
      :content="content"
      :options="editorOption"
      class="editor" 
      @change="onEditorChange($event)" :style="styles"
    ></quill-editor>
  </div>
</template>

<script>
import { fileImageApi } from \'@/api/ecmall/systemSetting\'
import "quill/dist/quill.snow.css";
import { Quill,quillEditor } from "vue-quill-editor";
import ImageResize from "quill-image-resize-module"; // 引用
Quill.register("modules/imageResize", ImageResize); // 注册
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", ], // 加粗 斜体 下划线 删除线 -----[\'bold\', \'italic\', \'underline\', \'strike\' "strike"]
  ["code-block"], // 引用  代码块-----[\'blockquote\', \'code-block\']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: \'ordered\' }, { list: \'bullet\' }]
 /*  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: \'sub\' }, { script: \'super\' }]
  [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: \'-1\' }, { indent: \'+1\' }]
  [{ direction: "rtl" }], // 文本方向-----[{\'direction\': \'rtl\'}] */
  [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: [\'small\', false, \'large\', \'huge\'] }]
//  [{ header: [1, 2, 3, 4, 5, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
 /*  [{ font: [] }], // 字体种类-----[{ font: [] }] */
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  /* ["clean"], // 清除文本格式-----[\'clean\'] */
  ["link", "image"] // 链接、图片、视频-----[\'link\', \'image\', \'video\']
];
const handlers = {
  //重写图片上传
  image: function image() {
    let self = this;
    let fileInput = this.container.querySelector("input.ql-image[type=file]");
    if (fileInput === null) {
      fileInput = document.createElement("input");
      fileInput.setAttribute("type", "file");
      // 设置图片参数名
      fileInput.setAttribute("name", "file");
      // 可设置上传图片的格式
      fileInput.setAttribute(
        "accept",
        "image/png, image/gif, image/jpeg, image/bmp, image/x-icon"
      );
      fileInput.classList.add("ql-image");
      // 监听选择文件
      fileInput.addEventListener("change", function() {
        let params = new FormData();
        params.append("multipart", fileInput.files[0]);
        const data = {
        model: 1,
        pid: 2
        }
        fileImageApi(params,data).then(res => {
          let length = self.quill.getSelection(true).index;
          //写入图片
          self.quill.insertEmbed(length, "image", res.url);
          self.quill.setSelection(length + 1);
          fileInput.value = "";
        });
      });
      this.container.appendChild(fileInput);
    }
    fileInput.click();
  }
};
export default {
  name: "Editor",
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
    },
    /* 高度 */
    height: {
      type: Number,
      default: \'400\',
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: \'300\',
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false,
    }
    
  },
  data() {
    return {
      content:
        "<h1>1</h1>",
      editorOption: {
        theme: "snow",
        placeholder: "请输入正文",
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: handlers
          },
          imageResize: {
            displaySize: true
          },
          readOnly: this.readOnly,
        }
      }
    };
  },
  watch: {
        value: {
     handler(val) {
        this.content=val
      },
      immediate: true,
        }
    },
  mounted() {
  },
  created() {},
  components: {
    quillEditor
  },

  computed: {
     styles() {
      let style = {};
      if (this.minHeight) {
        style.minHeight = `${this.minHeight}px`;
      }
      if (this.height) {
        style.height = `${this.height}px`;
      }
      return style;
    },
  },

  methods: {
    onChange() {
     this.$emit("input",     document.querySelector(".ql-editor").innerhtml);
      },
    onEditorChange({ quill, html, text }) {
        console.log(\'editor change!\', quill, html, text)
        this.content = html
        this.$emit("input",this.content )
      }
  }
};
</script>
<style lang="less" scoped></style>

父组件调用如下：

<editor v-model="form.noticeContent" :min-/> 

关于image-resize-module引入报错 imports 错误
修改vue.config.js

configureWebpack 内添加
,
    plugins: [
      new webpack.ProvidePlugin({
        \'window.Quill\': \'quill/dist/quill.js\',
        \'Quill\': \'quill/dist/quill.js\'
      }),
    ],

安装quill-image-extend-module（上传图片）、\'quill-image-resize-module （图片大小调整） npm install 上述两个就行了。

不过这个富文本框改造之后，截图并复制到里面，还是传的是base64编码。