vue-quill-editor 富文本样式失效

本文档描述了在富文本编辑器Quill中遇到的回显样式丢失问题,包括引用和居中对齐样式未显示的情况。通过检查元素样式发现,回显时样式未生效是因为缺少对应的CSS。解决方案是引入`quill/dist/quill.snow.css`样式文件,并在回显内容的div上添加`ql-container ql-snow`类,从而成功恢复了预期的富文本样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天发现回显富文本时没有展示设置的效果。

下图为富文本回显效果 ,第一段文字设置了引用,前面没有灰色的标识,第二段文字,对齐方式设置了居中对齐也没有展示出来:
在这里插入图片描述
F12看元素的样式发现对应的样式都生成了 class 类名:
在这里插入图片描述
原因:

在回显时候,不支持quill编辑出来的样式,因为生成的标签只有类名,没有样式。

解决方法:

引入样式文件,将回显的html内容,包裹在一个div容器中,并加上对应的class。

引入样式:

import 'quill/dist/quill.snow.css'

回显的 div 加上对应的class:

<div class&#
如果你在使用 `vue-quill-editor` 编辑器时,发现加粗等功能失效,可能是因为缺少了 Quill样式文件。 解决方法是在你的 `index.html` 文件头部加入以下代码来引入 Quill样式文件: ```html <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> ``` 如果你已经正确引入了 Quill样式文件,但是加粗等功能仍然失效,可能是因为你的配置项不正确。可以参考以下代码进行配置: ```javascript import { quillEditor } from 'vue-quill-editor' export default { components: { quillEditor }, data() { return { editorOption: { modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], // 加粗,斜体,下划线,删除线 ['blockquote', 'code-block'], // 引用,代码块 [{ 'header': 1 }, { 'header': 2 }], // 标题,键值对的形式;1、2表示字体大小 [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表 [{ 'script': 'sub' }, { 'script': 'super' }], // 上下标 [{ 'indent': '-1' }, { 'indent': '+1' }], // 缩进 [{ 'direction': 'rtl' }], // 文本方向 [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小 [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 几级标题 [{ 'color': [] }, { 'background': [] }], // 字体颜色,字体背景颜色 [{ 'font': [] }], // 字体 [{ 'align': [] }], // 对齐方式 ['clean'], // 清除文本格式 ['link', 'image', 'video'] // 链接、图片、视频 ] }, // 其他配置项 }, content: '' } } } ``` 其中,`toolbar` 数组中包含了所有可用的工具栏功能,包括加粗、斜体、下划线、删除线等。确保你的配置项中包含了这些功能即可正常使用加粗等功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值