vue-quill使用时候要注意css引入方式，不然会报错，卡死，白屏
@vueup/vue-quill 的一个样式 bug
在vue-quill使用时候要注意css引入方式，不然会报错，卡死，白屏，下面是正确引入：
import {QuillEditor} from '@vueup/vue-quill'
import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
- 一定要用dist里面的css
建议使用下面介绍的包
附加另一个版本的 Vue-Quill 使用手册
在现代的前端开发中，富文本编辑器已经成为了许多应用不可或缺的一部分。它们让用户能够以一种直观、熟悉的方式输入和编辑格式化文本，类似于我们日常在办公软件或在线发布平台上所体验到的。Vue-Quill 就是这样一个为 Vue.js 设计的富文本编辑器组件，它基于著名的 Quill 编辑器构建，带来了强大的功能和极致的自定义能力。
本文旨在成为 Vue-Quill 的使用手册，从安装到配置，再到高级功能的实现，一步步引导你掌握这个强大的工具。
一、安装与基本设置
1. 安装 Vue-Quill
开始使用 Vue-Quill 之前，你需要确保你的项目中已经安装了 Vue.js。接下来，你可以通过 npm 或 yarn 来安装 Vue-Quill：
npm install vue-quill-editor --save
# 或者
yarn add vue-quill-editor
2. 引入 Vue-Quill
安装完成后，你需要在你的 Vue 组件中引入 Vue-Quill 编辑器。你可以全局注册这个组件，也可以在需要的组件中局部注册。
全局注册
在你的 main.js 文件中：
import Vue from 'vue'
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, /* { default global options } */)
局部注册
在你的单文件组件中（例如 YourComponent.vue）：
注意：从 vue-quill-editor 1.0.0 版本开始，组件名已更改为 quillEditor，而不是 VueQuillEditor。
3. 基本使用
在你的 Vue 组件模板中使用
现在，你的 Vue 应用中应该已经可以看到一个基本的 Quill 编辑器了。
二、配置与自定义
Vue-Quill 允许你通过传递选项对象来自定义编辑器的行为和外观。你可以在全局注册时设置默认选项，也可以在组件实例中通过 options 属性来设置。
1. 配置选项
以下是一些常用的配置选项：
theme: 设置编辑器的主题，例如'snow'。modules: 一个对象，用于配置 Quill 的不同模块。placeholder: 设置编辑器的占位符文本。readOnly: 设置为true可使编辑器处于只读模式。
你可以在组件中这样配置它们：
2. 自定义工具栏
Quill 的工具栏非常灵活，你可以通过配置 modules 中的 toolbar 选项来自定义它。你可以指定哪些按钮应该出现，以及它们的顺序。
例如，要添加一个包含基本格式化选项的自定义工具栏，你可以这样做：
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
['blockquote', 'code-block'], // 引用，代码块
[{ 'header': 1 }, { 'header': 2 }], // 标题大小
[{ 'list': 'ordered'}, { 'list': 'bullet' }], // 列表
[{ 'script': 'sub'}, { 'script': 'super' }], // 上下标
[{ 'indent': '-1'}, { 'indent': '+1' }], // 缩进
// 其他选项...
]
}
3. 自定义编辑器内容
Vue-Quill 使用 v-model 来双向绑定编辑器的内容。这意味着你可以像处理任何其他 Vue 数据属性一样处理编辑器的内容。你可以在组件的 data 函数中初始化它，并在需要时通过方法或计算属性来更新它。
三、高级功能
1. 事件监听
你可以监听由 Vue-Quill 发出的各种事件，以便在内容更改、选择更改或编辑器交互时执行自定义逻辑。
然后在你的组件方法中处理这些事件：
methods: {
handleEditorChange(content, delta, source, editor) {
console.log('Editor content changed:', content);
},
handleSelectionChange(range, source, editor) {
console.log('Selection changed:', range);
}
}
2. 自定义模块和扩展
Quill 的真正强大之处在于其模块化和扩展性。你可以创建自己的模块来添加新功能或覆盖现有功能。一旦创建了自定义模块，你就可以像其他模块一样将其添加到编辑器的配置中。
3. 与后端集成
将 Vue-Quill 与后端集成通常涉及将编辑器的内容序列化为一个格式（如 HTML 或 JSON），然后将其发送到服务器。你可以使用 Quill 的 getContents 方法来获取编辑器内容的一个 Delta 表示，然后将其转换为所需的格式。对于 HTML，你可以使用 Quill 的 root.innerHTML；但对于更复杂的应用，你可能需要将 Delta 转换为 JSON，并在服务器上处理它。
总结
Vue-Quill 是一个功能强大且高度可配置的富文本编辑器组件，适用于 Vue.js 应用。通过本文，你应该已经掌握了从安装和设置 Vue-Quill，到通过配置和自定义来优化编辑器体验所需的所有知识。现在，你可以在你的 Vue 项目中创建一个优雅、用户友好的富文本编辑器，以提升用户体验和内容创作的灵活性。