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

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

解决

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

<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">

<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