富文本插件quill生成内容后，字体样式未生效

已于 2022-05-12 17:12:17 修改
阅读量3.2k 收藏 15
点赞数 8
文章标签： 前端 javascript vue.js
于 2022-04-14 09:58:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33475629/article/details/124164613
版权

场景描述：

1、在富文本编辑器内，对文字进行了排版，以下为文字居中样式

2、在页面里使用v-html渲染富文本代码时，出现ql-align-center的class名，但是居中并未生效

解决办法：

1、在需要显示富文本样式的项目中，安装quill：npm i quill；

2、页面里引入样式css文件：import "quill/dist/quill.core.css"；

3、使用v-html的标签上加入class类名：class="ql-editor"；

最终效果 ：完美居中

qq_33475629
关注
  • 8
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
富文本编辑器生成的含有图片的内容转换成word文档 java 后端下载
06-22
wangEditor 等富文本内容 （含图片： base64格式、http的网络图片等） 转换成word java后端下载
vue quill editor 使用富文本添加上传音频功能
10-15
在Vue项目中，vue-quill-editor是一个非常实用的富文本编辑器组件，它提供了丰富的文本格式化选项。然而，原生的vue-quill-editor并不直接支持音频文件的上传。为了在富文本中添加上传音频的功能，我们需要进行一些...
vue2、vue3之富文本编辑器quillEditor的一些问题（使用、字体字号不生效、内容保留样式和去掉样式）
a20001999的博客
05-26 3347
vue2之富文本编辑器quillEditor的一些问题（使用、字体字号不生效、内容保留样式和去掉样式）
使用vue-quill-editor实现富文本编辑器
热门推荐
乐夫天命兮的博客
01-11 9万+
一、什么是富文本编辑器? 简单介绍一下，看过上面的图，您大致对富文本编辑器有个了解了，传统的textArea输入框输入的内容没法做格式上的更改，它的功能跟我们的word一样，可以对其中内容的格式做一些调整，还可以添加图片等等，它在开发中有个专有名词，叫富文本编辑器。 1、ueditor 国内人用ueditor的比较多，真的很中国化，经常在贴吧或论坛里看到这种风格的富文本编辑器。 2、bootst...
Quill富文本编译器字体设置用户端不生效问题
最新发布
s757484077的博客
04-10 284
追加一点知识点：如果其他样式没生效需要先安装：npm i quill ，如果首行缩进也没生效请看我另一篇博客。
vue-quill-editor （vue 、uniapp ）富文本样式失效问题
fakuangjingling的博客
11-30 1775
主要问题是针对于后台框架使用了vue-quill-edit框架创建的富文本到了前端之后没有显示对应的样式。
vue-quill-editor富文本 回显数据样式失效
weixin_45799001的博客
04-22 3563
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容器中，并加上对应
富文本vue-quill-editor 管理后台录入文章，前台JQ官网展示模板，样式无效等问题处理。。
attach_uzi的博客
08-14 631
富文本，给我折腾的难受，几乎每个富文本都会有很多坑让你踩，话不多说，记录一下，官网管理后台中用到富文本写文章，输出到后台，（带标签样式等），然后在官网ajax接收到这个模板标签，发现标签都有，但是样式却没有生效，我猜测是因为后台管理是引入vue-quill-editor组件，然后关键的css组件也引入。 <link rel="stylesheet" href="../css/quill.bubble.css"> <link rel="stylesheet" href="../css/q
微信小程序rich-text 文本首行缩进和图片居中和富文本rich-text 解析多个空格不成功 &nbsp
coldriversnow的专栏
11-16 1510
使用rich-text组件渲染html格式的代码，常常因为不能自定义css导致文本不能缩进，以及图片不能居中等问题，这里可以考虑使用js的replace方法，替换字符串，然后在渲染的同时加载行内样式。
如何解决小程序富文本转化工具wxparse有些样式不显示的问题？
muzidanwu的博客
06-12 1412
强烈推荐将富文本插件工具由Wxparse换成Parser。亲测可用，解决了好多wxparse的bug。 git下载地址https://github.com/jin-yufeng/Parser 功能介绍https://jin-yufeng.github.io/Parser/#/ 解决了样式显示不出来，有些元素没有转化出来的问题。 ...
vue使用富文本（quill）
01-13
vue使用富文本附件vue使用富文本附件
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
10-15
主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...
vue富文本编辑器 vue-quill-editor.js quill版本1.3.6
07-01
vue富文本编辑器vue-quill-editor.js quill版本1.3.6 使用教程 ： vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案 ...
vue-quill-editor编辑器文本不居中问题处理
fanfan的博客
07-07 5330
一、问题出现的原因 由于 使用这个样式 class="ql-align-center"，但是在app中显示时没有这个样式，所以就不居中，我们可以修改一下，改成 style="text-align: center;"这样就能完美显示了 二、修改 <script> import Quill from 'quill'; import Parchment from 'parchment'; //目的是修改富文本内容居中不了的问题 let config = { scope: P...
Vue富文本编辑器vue-quill-editor-使用-bug问题-教程
JackieDYH的博客
11-22 2286
Vue富文本编辑器vue-quill-editor-使用-bug问题小图标样式排布错乱
vue-quill-editor 富文本样式失效
且听风吟的博客
09-08 3390
解决方法：引入样式文件，将回显的html内容，包裹在一个div容器中，并加上对应的class。 引入样式： import 'quill/dist/quill.snow.css' 回显的 div 加上对应的class： <div class="ql-container ql-snow"> <div class="ql-editor" v-html="formData.content" /> </div> 问题解决啦： ...
【若依】 若依内置富文本框quill，editor居中无效
amoureux555的博客
02-23 2015
若依内置富文本框quill，editor居中无效
vue项目 vue-quill-editor富文本编辑器+图片上传
余白x的博客
08-16 2474
serverUrl
vue 显示quilleditor富文本内容
06-07
要在 Vue 中显示 Quill Editor 富文本内容，可以使用 `v-html` 指令将内容渲染到页面上。 首先，将 Quill Editor 中的内容存储到 Vue 实例的数据中。例如： ```javascript <template> <div> <div ref="quillEditor"></div> <div v-html="content"></div> </div> </template> <script> import Quill from 'quill' export default { data() { return { content: '' } }, mounted() { const quill = new Quill(this.$refs.quillEditor, { modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'list': 'ordered' }, { 'list': 'bullet' }], ['link', 'image', 'video'], ['clean'] ] }, placeholder: '请输入内容...' }) // 将 Quill Editor 中的内容存储到 Vue 实例的数据中 this.content = quill.root.innerHTML } } </script> ``` 在上面的示例中，我们创建了一个 Quill Editor，并将其渲染到页面上。然后，在 Quill Editor 中输入一些内容后，通过 `quill.root.innerHTML` 获取到输入的内容，并将其存储到 Vue 实例的 `content` 数据中。最后，使用 `v-html` 指令将 `content` 数据渲染到页面上。 需要注意的是，使用 `v-html` 指令会有 XSS（跨站脚本攻击）的风险，因此需要对内容进行安全过滤。可以使用一些第三方库，如 `DOMPurify`，进行过滤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值