vue-quill-editor回显时字体大小样式丢失

最新推荐文章于 2024-05-31 11:14:43 发布
最新推荐文章于 2024-05-31 11:14:43 发布
阅读量2.7k 收藏 1
点赞数 3
分类专栏： quill-editor 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ThatDawn/article/details/121917560
版权

有关于vue-quill-editor回显时字体大小样式丢失问题

请添加图片描述

如图，在回显编辑器中的内容时，发现文本内容的字色，下划线等样式均能使用，但是字体的大小无法统一
将其转换成html格式输出后发现
在这里插入图片描述
如图，在具体变化大小的字前都定义了一个class

查阅资料得知要想文本的样式正确显示，需要在回显的div上增加一个class=”ql-editor”的class名，来确保子元素样式被匹配到

<div class="ql-container">
            <div class="ql-editor" v-
最低0.47元/天 解锁文章
ThatDawn
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
富文本插件 和回显 vue-quill-editor
Liu_JiaqiPro的博客
10-22 2770
在开发过程中，input的限制会越来越明显。这时富文本输入框就派上用场了。 推荐使用这个插件vue-quill-editor 插件的使用方法和自定义组件的使用方法一样 第一步： 安装插件 npm install vue-quill-editor 第二步： 引入vue-quill-editor import { quillEditor } from 'vue-quill-editor' 还要引入下面的样式 import 'quill/dist/quill.core.css' im.
vue-quill-editor 自定义图片上传至OSS -> 相关文件
06-18
1. 当用户在Vue Quill Editor中插入图片时，触发`customUpload`事件。 2. 在`customUpload`的回调函数中，调用`httpRequest.js`中的方法向服务器请求上传策略。 3. 后端服务器接收到请求后，生成OSS上传策略，并返回...
quill富文本在v-html中样式失效
最新发布
WCBandCTZ的博客
05-31 336
样式不生效，改为解决。
在vue3中富文本编辑器Quill组件返回html时统计字数方法
qq_40109267的博客
05-01 104
官方网站简单介绍一下Quill:一个功能齐全的轻量级富文本编辑器，支持Text和HTML格式的内容但是在返回HTML时如果要再转化为text再去统计字符会需要有一层循环遍历，稍微会影响一点性能，以下介绍一种笔者觉得比较好的方法。
关于uni-app小程序 Vue-Quill-Editor编辑器的内容在样式丢失
tsang荒男的博客
02-14 2909
前言 关于pc端使用Vue-Quill-Editor插件，但是在小程序中，样式缺丢失问题 查找到Quill的样式 我们在pc端的quill包中找到以下的css文件，并放入在style文件夹中 <rich-text class="rich-text ql-editor" :nodes="details.newsContent | formatRichText"></rich-text> 在rich-text中加入样式标签ql-editor 并且在app.vue文件中引入 @imp
vue-quill-editor富文本 回显数据样式失效
weixin_45799001的博客
04-22 3631
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 （vue 、uniapp ）富文本样式失效问题
fakuangjingling的博客
11-30 2031
主要问题是针对于后台框架使用了vue-quill-edit框架创建的富文本到了前端之后没有显示对应的样式。
小程序 Vue-Quill-Editor编辑器的内容在小程序显示样式丢失
lixiaohua66的博客
07-06 1342
1.先在编辑器的quill文件夹中找到css文件，一共3个，quill.bubble.css、quill.core.css、quill.snow.css，把css改为wxss后缀；同时把文件中含有* 等报错的代码注释，因为小程序识别不了* 2.在wxss中添加引入： @import './quill.bubble.wxss'; @import './quill.core.wxss'; @import './quill.snow.wxss'; 3.下载wxParse插件 在wxml页面引入文件：...
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
11-19
在使用Vue.js开发Web应用时，常常会遇到需要集成富文本编辑器的需求，Vue-quill-editor是一个非常流行的轻量级富文本编辑器组件，它基于Quill库进行封装，提供了丰富的功能和良好的用户体验。然而，在实际项目中，...
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
12-10
1. 创建一个富文本组件`QuillEditor.vue`，并使用iview的`Upload`组件来处理图片上传。iview的上传组件允许我们设置各种属性，如`on-success`回调函数，用于处理图片上传成功后的操作，`format`和`max-size`限制上传...
Vue-Quill-Editor富文本编辑器的使用教程
10-17
import { quillEditor } from "vue-quill-editor"; import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; // 或者 'quill/dist/quill.bubble.css' 选择你喜欢的主题 ``` 在模板中，使用`quill...
vue-quill-editor+plupload富文本编辑器实例详解
10-17
主要介绍了vue-quill-editor+plupload富文本编辑器实例详解,需要的朋友可以参考下
vue-quill-editor 引入了css文件但是有些样式预览时回显不出来的问题
weixin_43720534的博客
07-28 1184
问题描述：在使用vue-quill-editor时，有些样式不能和编辑时一样表现，如:<pre></pre>,分析编辑器中的css样式可知，.ql-editor外层还需要加个class名ql-snow，（前提是已经引用过该css文件import ‘quill/dist/quill.snow.css’） 如： <div class="ql-snow"> <div class="ql-editor" v-html="content"> </d
@vueup/vue-quill 富文本插件 怎么显示字体字号大小，默认是没有字号的
Frank_colo的博客
12-22 682
到现在，虽然配置完成了，但是字体字号下拉还是一堆nomal，还需要写css样式。按照上面的文章配置完成后，css样式写在哪里？
【Vue】vue2预览显示quill富文本内容，vue-quill-editor回显页面，v-html回显富文本内容
qq_51055690的博客
08-24 6719
vue富文本编辑器vue-quill-editor的内容的渲染
vue-quill-editor 富文本编辑器使用出现的样式问题
weixin_45379180的博客
05-22 235
富文本编辑器
vue-quill-editor解决后端返回数据不能正常显示的问题
rixleft的博客
03-24 2889
表示你要加入那些功能，theme为主题，content-type为以什么格式显示，content是文本内容，具体信息可以鼠标左键加ctrl点击该属性，进入对应的文件中查看。
Vue中使用quillEditor编辑器使用粘贴可用，小坑讲解，回显空格丢失等问题。
社会人
10-17 2875
Vue中Vue-Quill-Editor富文本编辑器的使用，后端返回数据回显空格问题
vue-quill-editor 字体样式失效
zhongmei121的专栏
03-02 2323
最近使用vue-quill-editor，发现字体加粗、斜体、颜色都失效了，排查并没有样式冲突。 后来发现是由于处理粘贴内容的时候，处理insert的时候把样式去除了 clipboard: { // 粘贴版，处理粘贴时候带图片 matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]], }, handleCustomMatcher(node, Delta) { // 处理粘贴图片大小问题 let ops = []
vue-quill-editor无法回显
08-19
引用中提到了使用vue-quill-editor时遇到了回显问题。在引用中，可以看到在使用vue-quill-editor时需要引入相应的CSS文件，并使用Vue.use(VueQuillEditor)来注册插件。如果没有正确引入CSS文件或未注册插件，可能会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ThatDawn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值