在小程序中显示Vue-Quill-Editor编辑器的富文本
自己在做项目时发现,后台Vue-Quill-Editor编辑的富文本在小程序中无法正常显示,如下图这是Vue-Quill-Editor编辑的内容:这是小程序中显示的结果:发现大标题没有居中,首行缩进也没有实现,经测试发现,字体颜色,字体大小等也无法正常显示。不管是rich-text还是Wxparse富文本解释器都没有作用。查阅了大量资料才发现Vue-Quill-Editor编辑出的内容是配合相应的
自己在做项目时发现,后台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编辑的样式就都能整成显示了。
更多推荐
所有评论(0)