在小程序中显示Vue-Quill-Editor编辑器的富文本_微信小程序 quill 样式

自己在做项目时发现，后台Vue-Quill-Editor编辑的富文本在小程序中无法正常显示，如下图

这是Vue-Quill-Editor编辑的内容：

这是小程序中显示的结果：

发现大标题没有居中，首行缩进也没有实现，经测试发现，字体颜色，字体大小等也无法正常显示。不管是rich-text还是Wxparse富文本解释器都没有作用。

查阅了大量资料才发现Vue-Quill-Editor编辑出的内容是配合相应的CSS样式一起实现的，小程序中没有没有相应的CSS样式，就无法正常显示，下面是我的解决方法：

1.在在项目文件中找quill源文件，在dist目录下可以看到quill.bubble.css、quill.core.css、quill.snow.css这三个文件，Vue-Quill-Editor编辑器就是与这几个css文件配合实现各种样式的。

2.将上述的三个文件放到小程序项目中，后缀名全部改为wxss。

3.这时小程序会报错。我们只需要根据提示删除 * 符号和 > 符号就可以了。

4.在需要显示富文本内容的wxss文件中引用这个文件。
 

 @import './quill.bubble.wxss';
 @import './quill.core.wxss';
 @import './quill.snow.wxss';

5.最后在wxml页面使用 ，我使用的是rich-text标签，在标签上添加一个class="ql-editor"。

<rich-text nodes='{{content}}' class="ql-editor"></rich-text>

这样Vue-Quill-Editor编辑的样式就都能整成显示了。