vue项目中富文本编辑器使用

1. 首先在项目中安装富文本编辑器 npm i vue-quill-editor@3.0.6 -S

2. 在项目入口文件 main.js 中导入并全局注册富文本编辑器：

    // 导入富文本编辑器
    import VueQuillEditor from 'vue-quill-editor'
    // 导入富文本编辑器的样式
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'

    // 全局注册富文本编辑器
    Vue.use(VueQuillEditor)

3. 定义富文本编辑器数据项

    data() {
        return {
            content: ''
        }
    }

<el-form-item label="文章内容">
  <!-- 使用 v-model 进行双向的数据绑定 -->
  <quill-editor v-model="content"></quill-editor>
</el-form-item>

4. 美化富文本编辑器样式

// 设置富文本编辑器的默认最小高度
/deep/ .ql-editor {
  min-height: 300px;
}

5. 富文本编辑器还可以自定义工具栏工具

    // 全局配置
    ```
// 工具栏
const toolbarOptions = [    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
    [{ align: [] }], // 对齐方式-----[{ align: [] }]
    [{ size: fontSizeStyle.whitelist }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
    [{ font: fonts }], // 字体种类-----[{ font: [] }]
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ direction: 'ltl' }], // 文本方向-----[{'direction': 'rtl'}]
    [{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
    [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
    ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
    ['clean'], // 清除文本格式-----['clean']
    ['link', 'image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
]
//全局所有的配置
Vue.use(VueQuillEditor, {
  modules: {
    toolbar: {
      container: toolbarOptions
    }
  }
})

// 局部
<quill-editor :options="editorOption"></quill-editor>
data() {
    return {
        editorOption: {
            modules: {
                toolbar: {
                    container: toolbarOptions
                }
            }
        }
    }
}