今天发现回显富文本时没有展示设置的效果。

下图为富文本回显效果 ，第一段文字设置了引用，前面没有灰色的标识，第二段文字，对齐方式设置了居中对齐也没有展示出来：

F12看元素的样式发现对应的样式都生成了 class 类名：

原因：

在回显时候，不支持quill编辑出来的样式，因为生成的标签只有类名，没有样式。

解决方法：

引入样式文件，将回显的html内容，包裹在一个div容器中，并加上对应的class。

引入样式：

import 'quill/dist/quill.snow.css'
回显的 div 加上对应的class：
 
<div class="ql-container ql-snow">
     <div class="ql-editor" v-html="formData.content" />
</div>
这下再看，问题解决啦：
 
                    解决方法：引入样式文件，将回显的html内容，包裹在一个div容器中，并加上对应的class。引入样式：import 'quill/dist/quill.snow.css'回显的 div 加上对应的class：&lt;div class="ql-container ql-snow"&gt;     &lt;div class="ql-editor" v-html="formData.content" /&gt;&lt;/div&gt;问题解决啦：...
				
vue-quill-editor是我们再使用vue框架的时候常用的一个富文本编辑器，在进行富文本编辑的时候，我们往往要插入一些图片，vue-quill-editor默认的处理方式是直接将图片转成base64编码，这样的结果是整个富文本的html片段十分冗余，通常来讲，每个服务器端接收的post的数据大小都是有限制的，这样的话有可能导致提交失败，或者是用户体验很差，数据要传递很久才全部传送到服务器。
1.下载Vue-Quill-Editor
npm install vue-quill-editor --save
2.下载quill（Vue-Quill-Editor需要依赖）
npm inst
				
1. 前言
vue-quill-editor 是vue项目中常用的富文本插件，其功能能满足大部分的项目需求。但是，最近项目中，需要在富文本中上传音频文件，但是vue-quill-editor这个富文本仅支持图片，视频上传；所以这个功能需要自定义。
怎么实现这个功能？
  写一个只能上传音频的组件，并且隐藏
  在富文本插件的toolbar定义一个按钮，点击时调用上传组件
  监听上传成功的回调函数，在富文本输入框中插入音频标签
2. 功能实现
2.1 基于Element-ui实现上传组件，并且隐藏（不能让用户点击）
首先，必须隐藏这个元素：；
				
vue富文本编辑器vue-quill-editor.js  quill版本1.3.6
使用教程 ：
vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案
https://blog.csdn.net/cplvfx/article/details/125557966
				
使用vue-quill-editor写的富文本，内容在H5使用v-html显示时，样式跟在富文本写的时候样式不一样，字体大小显示不出来。
原因：有些类名，在v-html页面是没有找到的。
全局或者局部引入vue-quill-editor的样式文件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
<div v-html="co.
				
在使用vue-quill-editor的时候，遇到前四个功能全失效的情况，
即加粗、倾斜、下划线、删除线失效，
其原因其实是全局css，我的reset.css是设置了strong（加粗）、em（倾斜）、u(下划线）、s（删除线）默认样式，导致失效，只要对全局css做修改即可。
其他样式失效也可能是这个原因，可作为参考，如代码块没有背景色，在全局css对pre添加背景色即可。
				
vue-quill-editor:
安装： yarn add vue-quil-editor --save
兼容性：亲测 在ie11 和 edge 可用，但是在ie10就报错了。
解决：换插件
				
Vue-Quill-Editor 是一个基于 Quill.js 的富文本编辑器组件，可以方便地在 Vue.js 项目中使用。如果你需要在 Vue-Quill-Editor 中扩展表格功能，可以按照以下步骤实现：
1. 安装依赖
在项目目录下执行以下命令安装 quill-table-extended 插件：
npm install quill-table-extended --save
2. 引入插件
在 main.js 文件中引入插件并注册：
```javascript
import Vue from 'vue'
import Quill from 'quill'
import { QuillEditor } from 'vue-quill-editor'
import QuillTableExtended from 'quill-table-extended'
Quill.register('modules/tableExtended', QuillTableExtended)
Vue.component('quill-editor', QuillEditor)
3. 使用插件
在需要使用表格功能的地方，添加以下配置：
```javascript
<quill-editor v-model="content" :options="editorOption"></quill-editor>
<script>
export default {
  data () {
    return {
      content: '',
      editorOption: {
        modules: {
          tableExtended: {
            defaultRows: 3,
            defaultColumns: 3,
            enabled: true,
            tableClassName: 'table',
            rowClassName: 'table-row',
            cellClassName: 'table-cell'
</script>
4. 配置项说明
- `defaultRows`：表格默认行数。
- `defaultColumns`：表格默认列数。
- `enabled`：是否开启表格功能。
- `tableClassName`：表格样式类名。
- `rowClassName`：表格行样式类名。
- `cellClassName`：表格单元格样式类名。
通过以上步骤，就可以在 Vue-Quill-Editor 中扩展表格功能了。