在小程序中显示Vue-Quill-Editor编辑器的富文本

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

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

在小程序中显示Vue-Quill-Editor编辑器的富文本_第1张图片

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

在小程序中显示Vue-Quill-Editor编辑器的富文本_第2张图片

发现大标题没有居中,首行缩进也没有实现,经测试发现,字体颜色,字体大小等也无法正常显示。不管是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.这时小程序会报错。我们只需要根据提示删除 * 符号和 > 符号就可以了。

在小程序中显示Vue-Quill-Editor编辑器的富文本_第3张图片

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

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

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

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

在小程序中显示Vue-Quill-Editor编辑器的富文本_第4张图片

 

你可能感兴趣的:(小程序,小程序)