2020-06-10 vue富文本框插件vue-quill-editor

吐槽一下用了好几个博客的demo都各种报错... 直接上基础应用的demo：

<template>
  <div>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import Quill from "quill"; // 富文本基于quill

//默认有工具栏，如果想自定义工具栏可以在toolbarOptions配置，不需要的删掉即可
//想直接使用默认的工具栏删掉editorOption中的modules->toolbar即可
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
  ["blockquote", "code-block"], //引用，代码块

  [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、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: [] }], //对齐方式

  ["clean"], //清除字体样式
  ["image", "video"] //上传图片、上传视频
];

export default {
  name: "QuillEditor",
  components: { quillEditor },
  data() {
    return {
      content: "",
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions // 工具栏
          }
        },
        placeholder: "Compose an epic...",
        theme: "snow" //默认即是snow
      }
    };
  },
  methods: {
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    onEditorReady(quill) {
      console.log("editor ready!", quill);
    },
    onEditorChange({ quill, html, text }) {
      console.log("editor change!", quill, html, text);
      this.content = html;
    }
  },
  mounted() {
    console.log("this is current quill instance object", this.editor);
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  }
};
</script>

<style lang="scss" >
.ql-editor {
  height: 500px;
}
</style>

注意：

1.设置富文本框的高度的时候请把style上的 scoped 去掉

2.编辑器默认点击上传图片只能单张上传，如果想要使用更方便，可以使用插件quill-image-drop-module，就可多张拖拽上传。

（这个拖曳上传有点捞，点击工具栏上传图片图标，还是会弹出选择文件框，然后再把图片直接拖曳进富文本框，在关掉选择文件框）

安装module：yarn add quill-image-drop-module

引入和使用：

import { ImageDrop } from 'quill-image-drop-module';
Quill.register('modules/imageDrop', ImageDrop);

 data() {
    return {
      content: "",
      editorOption: {
        modules: {
          imageDrop: true,//开启图片拖曳上传
        },
        placeholder: "Compose an epic...",
        theme: "snow", //默认即是snow
      },
    };
  },

参考：Quill官方中文文档 vue-quill-editor

Quill官方文档 Quill Documentation

liya要成大前端 vue使用富文本编辑器vue-quill-editor，含拖拽图片，调整默认高度