由于官方提供的quill自带的toolbar存在很多限制，例如字体大小只有 Small、Normal、Large、Huge四种，但是在实际业务中，富文本的显示是多种多样的，此时，我们需要去自定义实现一些功能。

quill编辑器在vue中的使用

1、引入quill包

npm install quill

2、定义基本的富文本编辑器组件Editor

html部分，定义了基本的标签，且toolbar部分可以使用插槽自定义。

<template>
  <div class="quill-editor">
    <slot name="toolbar"></slot>
    <div ref="editor"></div>
  </div>
</template>

js部分，主要定义了三个props属性，以及实现了值的双向绑定和事件的抛出。

<script lang="ts">
import Vue from 'vue';
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default Vue.extend({
  props: {
    value: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '请输入...',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      quill: null,
      content: '',
    };
  },
  watch: {
    value() {
      if (this.quill) {
        if (this.value && this.value !== this.content) {
          this.content = this.value;
          this.quill.pasteHTML(this.value);
        } else if (!this.value) {
          this.quill.setText('');
        }
      }
    },
    disabled() {
      this.quill && this.quill.enable(!this.disabled);
    },
  },
  mounted() {
    this.initData();
  },
  beforeDestroy() {
    this.quill = null;
    delete this.quill;
  },
  methods: {
    initData() {
      if (!this.$el) return;
      // 在这里引入实现自定义功能的代码
      const toolOptions = [
        ['bold', 'italic', 'underline', 'strike'],
        [{ header: 1 }, { header: 2 }, { script: 'sub' }, { script: 'super' }, { indent: '-1' }, { indent: '+1' }],
        [{ color: [] }, { background: [] }, { font: [] }, { align: [] }],
      ];
      const option = {
        theme: 'snow',
        boundary: document.body,
        modules: {
          toolbar: {
            container: toolOptions,
          },
        },
        placeholder: this.placeholder,
        readOnly: false,
      };
      this.quill = new Quill(this.$refs.editor, option);
      this.quill.enable(false);
      this.value && this.quill.pasteHTML(this.value);
      !this.disabled && this.quill.enable(true);
      // emit event
      this.quill.on('selection-change', () => {
        this.$emit('selection-change', this.quill);
      });
      this.quill.on('text-change', () => {
        const editerCon = this.$refs.editor.children[0];
        let html = editerCon.innerHTML;
        if (html === '<p><br></p>') html = '';
        this.content = html;
        this.$emit('input', html);
        this.$emit('text-change', this.quill);
      });
      this.$emit('ready', this.quill);
    },
  },
});
</script>

css部分，使用了比较新的all属性，避免外部样式影响组件，同时设置了富文本框的最小和最大高度。

<style scoped lang="scss">
.quill-editor {
  all: initial;
  font-size: inherit;
  font-family: inherit;
  color: inherit;

  ::v-deep .ql-editor {
    min-height: 200px;
    max-height: 500px;
  }
}
</style>

至此，一个简单的vue版富文本框以及实现了，把代码复制到项目中就可以当成一个组件使用了。

自定义字体大小和内联样式

由于富文本是作为组件使用的，可能用在不同的场景，比如发送邮件等，而由于quill默认的是使用class来定义样式的，这样就导致我们在富文本框里面定义好的样式，在邮件里面无法正确的生效。

通过查找文档，发现可以通过内联样式来解决这个问题，详情见!https://quilljs.com/guides/how-to-customize-quill/#class-vs-inline^[1]。

因为自定义字体大小和内联样式的实现，有很多的共同点，这里把他们放在一起实现。

1、内联自定义字体大小

定义如下代码，在Editor组件的js实现部分引入这个方法，我在代码里面写了注释(在这里引入实现自定义功能的代码)

// 自定义字体大小
import Quill from 'quill';
export function register(){
  const SizeStyle = Quill.import('attributors/style/size');
  SizeStyle.whitelist = ['12px', '14px', '16px', '18px', '24px', '32px'];
  Quill.register(SizeStyle, true);
}

2、配置toolOptions

更改Editor组件的js实现部分的toolOptions定义，添加如下代码：

const toolOptions = [
	...
    [{ size: ['12px', '14px', '16px', '18px', '24px', '32px'] }],
]

3、显示样式调整

自定义字体大小后，运行代码我们发现，更改字体大小的功能是实现了，但是页面上显示的都是Normal。浏览器控制台检查标签可以发现，官方通过动态生成样式里面的before的content实现的页面显示，我们可以通过css样式把它更改掉。

<style scoped lang="scss">
.quill-editor {
  ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  ::v-deep .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: attr(data-value);
  }
}
</style>

引用链接

[1] https://quilljs.com/guides/how-to-customize-quill/#class-vs-inline: https://quilljs.com/guides/how-to-customize-quill/#class-vs-inline