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 2771
在开发过程中，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 341
样式不生效，改为解决。
vue-quill-editor 富文本编辑器使用出现的样式问题
weixin_45379180的博客
05-22 240
富文本编辑器
关于uni-app小程序 Vue-Quill-Editor编辑器的内容在样式丢失
tsang荒男的博客
02-14 2913
前言 关于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 3634
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 2049
主要问题是针对于后台框架使用了vue-quill-edit框架创建的富文本到了前端之后没有显示对应的样式。
小程序 Vue-Quill-Editor编辑器的内容在小程序显示样式丢失
lixiaohua66的博客
07-06 1348
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使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
01-19
1、安装插件：npm install vue-quill-editor 2、安装插件依赖：npm install quill 3、main.js文件中引入： import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core....
vue-quill-editor.7z
08-06
Vue Quill Editor是一款基于Vue.js的富文本编辑器组件，它是Quill编辑器的一个封装，提供了与Quill原生编辑器类似的使用体验，同时能够很好地融入Vue应用的生命周期。Quill是一个强大的开源富文本编辑器，它具有良好...
vue quill editor 使用富文本添加上传音频功能
10-15
const quill = this.$refs.quillEditor.quill; const range = quill.getSelection(true); quill.insertEmbed(range.index, 'audio', audioUrl); quill.setSelection(range.index + 1); } ``` 以上就是使用vue-...
vue结合element-ui和quill富文本编辑器实现上传视频和封面
12-03
Vue-quill-editor是Vue.js的Quill组件封装，可以通过npm进行安装： ```bash npm install vue-quill-editor element-ui --save ``` 在`main.js`文件中引入并注册Element-UI和Vue-quill-editor： ```javascript ...
vue-quill-editor 引入了css文件但是有些样式预览时回显不出来的问题
weixin_43720534的博客
07-28 1185
问题描述：在使用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 688
到现在，虽然配置完成了，但是字体字号下拉还是一堆nomal，还需要写css样式。按照上面的文章配置完成后，css样式写在哪里？
【Vue】vue2预览显示quill富文本内容，vue-quill-editor回显页面，v-html回显富文本内容
qq_51055690的博客
08-24 6751
vue富文本编辑器vue-quill-editor的内容的渲染
vue-quill-editor无法回显
08-19
引用中提到了使用vue-quill-editor时遇到了回显问题。在引用中，可以看到在使用vue-quill-editor时需要引入相应的CSS文件，并使用Vue.use(VueQuillEditor)来注册插件。如果没有正确引入CSS文件或未注册插件，可能会导致vue-quill-editor无法正常回显。 此外，根据引用，可以在Interactive Playground - Quill Rich Text Editor网站上尝试配置对象来解决回显问题。这个网站可以提供更详细的配置说明和实时预览效果，有助于找出问题所在。 综上所述，如果vue-quill-editor无法回显，可以检查是否正确引入CSS文件、是否正确注册插件，并参考Interactive Playground网站上的配置示例来调整配置对象。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue-quill-editor解决后端返回数据不能正常显示的问题](https://blog.csdn.net/rixleft/article/details/129746444)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue-quill-editor富文本 回显数据样式失效](https://blog.csdn.net/weixin_45799001/article/details/124345864)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

ThatDawn

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

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

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

打赏作者

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

抵扣说明：

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

余额充值