富文本编辑器的使用

1、下包

npm install vue-quill-editor -S

2、引入

import { quillEditor } from 'vue-quill-editor' 
import 'quill/dist/quill.core.css' 
import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css'

3、注册组件

components: { quillEditor }

4、使用组件

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

5、在data下放入代码

// 富文本编辑器配置 
editorOption: { modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], 
// 加粗 斜体 下划线 删除线
['blockquote', 'code-block'], 
// 引用 代码块 
[{ header: 1 }, { header: 2 }], 
// 1、2 级标题 
[{ list: 'ordered' }, { list: 'bullet' }], 
// 有序、无序列表 
[{ script: 'sub' }, { script: 'super' }], // 上标/下标 [{ indent: '-1' }, { indent: '+1' }], 
// 缩进 
[{ direction: 'rtl' }], 
// 文本方向 
[{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], 
// 字体大小 
[{ header: [1, 2, 3, 4, 5, 6] }], 
// 标题 
[{ color: [] }, { background: [] }], 
// 字体颜色、字体背景颜色 
 [{ font: ['songti'] }], 
// 字体种类 
[{ align: [] }], 
// 对齐方式 
['clean'], 
// 清除文本格式 
['image', 'video'] 
// 链接、图片、视频
] }, placeholder: '请输入正文' },

6、使用深度选择器更改富文本编辑框的高度

::v-deep(.ql-editor) { min-height: 200px; }