富文本编辑器（Vue插件）

下载 vue-quill-editor

// 下载Vue-Quill-Editor
npm install vue-quill-editor --save;

下载quill（Vue-Quill-Editor需要依赖）

// 下载quill（Vue-Quill-Editor需要依赖）
npm install quill --save;

引入

<template>
	<quill-editor
	   class="quill" 
	   v-model="content" 
	   ref="myQuillEditor" 
	   :options="editorOption" 
	   @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
	   @change="onEditorChange($event)">
	 </quill-editor>
</template>

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: `
张三
`,
            editorOption: {}
        }
    },
    methods: {
        onEditorReady(editor) { // 准备编辑器
 
        },
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件
    },
}

效果图片