vue中如何使用富文本编辑器和如何自定义菜单栏

1、下载Vue-Quill-Editor

npm install vue-quill-editor --save

    复制页面代码即可完成引入和初始化

<template>
    <div class="edit_container" style="height: 350px;">
        <quill-editor
            style="height: 300px;" 
            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';
export default {
    components: {
        quillEditor
    },
    data() {
        return {
            content: `<a  href="http://www.cctv.com/">央视网</a>`,
            editorOption: {
				modules:{   //modules为自定义标题栏，使用默认的话可去掉modules
                        toolbar:[
                           ['bold', 'italic', 'underline', 'strike'],//分别对应的是： 粗体，斜体，下划线，删除线    
                           ['blockquote', 'code-block'], //
						   [{ 'header': 1 }, { 'header': 2 }],
						   [{ 'list': 'ordered'}, { 'list': 'bullet' }],//显示有序和无序列表
						   [{ 'color': [] }, { 'background': [] }],   //显示背景字体颜色
                           [{ 'font': [] }],   //显示字体选择
                           [{ 'align': [] }],  //显示居中
						   ['link'],           //显示超链接
						   
                        ]
                    }

			}
        }
    },
    methods: {
        onEditorReady(editor) { // 准备编辑器
 
        },
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    }
}
</script>

示例：[‘head’]加入 到modules中即可

自定义菜单配置配置说明   
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      'code', // 插入代码
      'undo', // 撤销
      'redo' // 重复

展示效果如下