vue-quill-editor样式丢失

2022-05-28 10:18:44 浏览数 (1)

文章时间:2021年5月11日 14:04:50 解决问题:Quill在页面中样式丢失,无法显示富文本样式

ps:用富文本的情况有很多,例如在后台管理系统排版好的富文本页面,准备在移动端页面去显示,或者在官网显示,两个项目不在一起,在管理系统排好的样式在显示页面显示的一塌糊涂,为啥呢?大多数情况是样式没有引入。

解决

给容器增加一个class ql-editor,才能正常显示,另外前面是主题类名,不同的主题显示不同的样式

代码语言:javascript复制
<link href="https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.snow.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.core.css" rel="stylesheet">
代码语言:javascript复制
<pre v-html="content.content" class="pre ql-snow ql-editor"></pre>

在线CDN地址:https://www.bootcdn.cn/quill/

参考教程:

vue-quill-editor富文本内容在页面中样式丢失:https://blog.csdn.net/chi1130/article/details/99890598

0 人点赞