系列文章目录

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

---

---

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

前言

上篇文章介绍了如何在vue中使用quill-editor，但是quill-editor的工具栏内容很多，很多功能我们用不到，所以本篇文章来定制quill-editor的工具栏

---

一、toolbar工具栏对应的模块

首先要知道toolbar包括哪些内容，toolbar里的内容大致分为以下两类：

// 1.只需要填写功能名
bold - 加粗
italic - 斜体
underline - 下划线
strike - 删除线
blockquote - 引用
code-block - 代码块
formula - 公式
image - 图片
video - 视频
clean - 清除所有样式
// 这一类直接['name','name']就可以使用

// 2.需要写默认值
header - 标题  
[{ 'header': 1 }, { 'header': 2 }]

list - 列表(有序和无序列表)
[{ 'list': 'ordered'}, { 'list': 'bullet' }]

script - 上标/下标
[{ 'script': 'sub'}, { 'script': 'super' }]
indent - 缩进
[{ 'indent': '-1'}, { 'indent': '+1' }]

direction - 文本方向
[{ 'direction': 'rtl' }]

// 3.有多个值，以下拉列表展示
// false代表默认选中
size - 文字大小
 [{ 'size': ['small', false, 'large', 'huge'] }]

header - 标题
[{ 'header': [1, 2, 3, 4, 5, 6, false] }]

// 4.只需填写一个空数组 系统会出现默认的选项
color - 字体颜色
background - 背景颜色
[{ 'color': [] }, { 'background': [] }]
font - 字体
[{ 'font': [] }]
align - 文本对齐
[{ 'align': [] }]

二、使用自定义的toolbar

1.定制自己的toolbar

了解了toolbar中的内容，就可以在配置toolbar时选择自己需要的功能，如果有不需要的功能，在下面的数组中删除即可。

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

2.使用定制的toolbar

模块中使用代码如下（示例）：

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

3.完整代码

<template>
  <quill-editor
    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
// 定制toolbar
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ header: 1 }, { header: 2 }],
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: [] }], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], //显示字体选择
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["link"], // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
  name: "TestQuillEditor",
  components: { quillEditor },
  data() {
    return {
      content: "",
      editorOption: {
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
        },
      },
    };
  },
  computed: {
    //当前富文本实例
    editor() {
      return this.$refs.editorRef.quillEditor;
    },
  },
  methods: {
    // 准备富文本编辑器
    onEditorReady() {},
    // 富文本编辑器 失去焦点事件
    onEditorBlur() {},
    // 富文本编辑器 获得焦点事件
    onEditorFocus() {},
    // 富文本编辑器 内容改变事件
    onEditorChange({ html }) {
      //内容改变事件
      // console.log('内容改变事件');
    },
  },
};
</script>
<style>
</style>

效果图如下：

---

总结

本篇文章讲述如何修改quill-editor的工具栏，下篇文章将介绍如何增加字体和文字大小。