Vue中使用quill-editor之二次封装quill-editor

系列文章目录

一、 Vue中使用quill-editor之初体验
二、 Vue中使用quill-editor之修改工具栏(toolbar)
三、Vue中使用quill-editor之增加字体和文字大小
四、Vue中使用quill-editor之二次封装quill-editor

---

---

前言

上篇文章介绍了如何增加quill-editor中的字体和文字大小，在日常开发中，可能会有很多模块用到这个富文本编辑器，所有想到将quill-editor封装成组件，以便多次使用。

---

友情提醒：以下内容在本地测试无误，如果有不清楚的内容，建议查看系列文章的前几篇

一、组件封装

在components中新建文件，写入下面的代码：

<template>
  <quill-editor
    :id="randomId(3)"
    v-model="content"
    :ref="editorRef"
    :options="editorOption"
    @focus="onEditorFocus($event)"
    @blur="onEditorBlur($event)"
    @change="onEditorChange($event)"
    class="editor"
  />
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
// 自定义的字体和文字大小样式
import "../assets/css/quillEditor.css";
import * as Quill from "quill";
//quill编辑器的字体
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
];
// 自定义字号的大小
var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: sizes }], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: fonts }], //显示字体选择
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["link"], // 链接、图片、视频-----['link', 'image', 'video']
];

export default {
  name: "TestQuillEditor",
  components: { quillEditor },
  props: {
    // 编辑器的内容
    editorContent: {
      type: String,
      required: true,
    },
    editorRef: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      content: this.editorContent,
      editorOption: {
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
        },
      },
    };
  },
  computed: {
    //当前富文本实例
    editor() {
      return this.$refs.editorRef.quillEditor;
    },
  },
  watch: {
    editorContent() {
      this.content = this.editorContent;
    },
  },
  methods: {
    randomId(len) {
      var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
      var tempLen = chars.length,
        tempStr = "";
      for (var i = 0; i < len; ++i) {
        tempStr += chars.charAt(Math.floor(Math.random() * tempLen));
      }
      return tempStr;
    },
    // 准备富文本编辑器
    onEditorReady() {},
    // 富文本编辑器 失去焦点事件
    onEditorBlur() {},
    // 富文本编辑器 获得焦点事件
    onEditorFocus() {},
    // 富文本编辑器 内容改变事件
    onEditorChange({ html }) {
      //内容改变事件
      // console.log('内容改变事件');
      this.$emit("input", this.content);
    },
  },
};
</script>
<style>
</style>

二、父组件引用

代码如下（示例）：

<template>
  <div>
    <editor
      v-model="editorContent"
      :editorContent="editorContent"
      :editorRef="editorRef"
    ></editor>
	<!-- 回显富文本编辑器的内容 -->
	<div v-html="editorContent"></div>
	<!-- 查看富文本编辑器的内容 -->
    <div>{{ editorContent }}</div>
  </div>
</template>

<script>
// 引入子组件
import editor from "../../components/Quill-editor.vue";
export default {
  components: {
    editor,
  },
  data() {
    return {
      editorRef: "test",
      editorContent: "",
    };
  },
  methods: {},
};
</script>
<style>
</style>

效果图：

---

总结

本文介绍了如何将quill-editor二次封装，方便多个页面同时使用，节省开发时间。