1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 在小程序中显示Vue-Quill-Editor编辑器的富文本

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

时间:2023-12-31 03:39:18

相关推荐

在小程序中显示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编辑的样式就都能整成显示了。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。