vue-quill-editor富文本回显数据样式失效

1.首先排查的css文件是否引入，在min.js中查看import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'Vue.use(VueQuillEditor)2

晓柯爱

3797人浏览 · 2022-04-22 14:57:17

晓柯爱 · 2022-04-22 14:57:17 发布

1.首先排查的css文件是否引入，在min.js中查看

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

2.重点检查v-html 回显代码片段

3.将回显的html内容，包裹在一个div容器中，并加上对应的class


<div class="ql-container ql-snow">
<div class="ql-editor" v-html="list.content">
</div>

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^