【vue】vue2editor富文本组件

参考：https://www.vue2editor.com/

main.js

import Vue2Editor from "vue2-editor";
// 用于自定义字体颜色样式等
import 'common/css/richText.css';

Vue.use(Vue2Editor);

自定义字体颜色等

RichText.vue

<template>
    <div>
      <vue-editor v-model.sync="message" :editor-toolbar="customToolbar"/>
    </div>
</template>
<style>
</style>
<script>
import { Quill } from "vue2-editor";

let fontList = ["SimSun"];
Quill.imports["formats/font"].whitelist = fontList;
Quill.register(Quill.imports["formats/font"]);

let fontSizeList = [false, "10px"];
Quill.imports["attributors/style/size"].whitelist = fontSizeList;
Quill.register(Quill.imports["attributors/style/size"]);

export default {
    props: {
      text: {
          type: String
      },
    },
    data () {
        return {
            message: this.text,
            dialogVisible: false,
            customToolbar: [
              //['bold', 'italic', 'underline'],
              //[{ list: 'ordered' }, { list: 'bullet' }],
               //['image', 'code-block']

              // eslint-disable-next-line standard/array-bracket-even-spacing
              [{ 'header': [false, 1, 2, 3, 4, 5, 6 ] }],
              [{ size: fontSizeList }],
              [{ font: fontList }],
              ['bold', 'italic', 'underline', 'strike'], // toggled buttons
              [{ 'align': ['', 'center', 'right', 'justify'] }],
              // ['blockquote'],
              // [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'list': 'check' }],
              // [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
              // [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
              [{ 'color': ['red', '#f3f3f3'] }, { 'background': ['#000', 'red'] }], // dropdown with defaults from theme
               //['link', 'image'],
              ['clean']
            ]
        }
    },
    components: {
    },
    created: function() {
    },
    mounted: function() {
    },
    watch: {
    },
    methods: {
    }
}
</script>

richText.css

.ql-font-SimSun {
  font-family: "SimSun";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "SimSun";
  font-family: "SimSun"!important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {
  content: "10px";
}

/*
.ql-size-10px {
  font-size: 10px;
}
*/

如果RichText.vue中Quill报错（Quill is not defined），在webpack配置文件中追加以下配置
webpack.base.config.js

        new webpack.ProvidePlugin({
            "window.Quill": "quill/dist/quill.js",
            Quill: "quill/dist/quill.js"
        }),