vue-quill-editor的样式问题

最新推荐文章于 2024-03-12 00:57:29 发布
最新推荐文章于 2024-03-12 00:57:29 发布
阅读量488 收藏
点赞数
分类专栏： 后台
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48371382/article/details/115357368
版权
使用vue-quill-editor编辑的文章在展示时样式未生效，解决方法是在渲染内容的容器添加特定类名，并确保已引入相关CSS样式。可在main.js中全局引入，或在具体组件JS中引入并链接到main.js。
摘要由CSDN通过智能技术生成

编辑好文章之后再展示出来发现之前编辑的样式并没有生效，这个时候需要在渲染内容的盒子里面添加类名才会生效
在这里插入图片描述

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

而且需要保证有引入css的样式
在main.js或者是在其他组件js中然后引到main.js
或者在页面里引入

import 'quill/dist/quill.snow.css'
小白白哦(๑•̀ㅂ•́)و
关注
专栏目录
Vue项目 +Element UI +vue-quill-editor 富文本编辑器图片上传功能+文字提示自定义
weixin_43837305的博客
09-18 1256
安装引入vue-quill-editor npm install vue-quill-editor --save 在main.js全局中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' impo...
(转)富文本编辑器——Vue2Editor
CaseyWei
10-13 2798
Vue2Editor是一个简单易用的富文本编辑器，如果没有复杂的需求，你可以毫无保留的使用它，如果你需要复杂的功能，也可以使用其自定义能力进行自定义扩展！
vue2中怎么使用css样式实现给元素穿衣的功能
yezi153的博客
08-28 288
在vue中使用css样式的几种写法
已实现：关于富文本组件库vue2-editor的使用方法以及一些必要的注意事项，特别是设置完富文本以后的回显问题。以及在光标位置插入字符串等
Spy003的博客
09-27 3968
vue2-editor” 和 “vue-quill-editor”都是用于Vue.js的富文本编辑器组件，它们具有一些共同的特点，但也有一些区别。组件很强大，同时也可以作为一个强大的普通文本框使用（隐藏掉工具栏），可以使用里面的插入方法，简直不要太爽。主要是使用找资料太难了，所以我来自己整理一下，下次使用的时候直接看自己的记录，不然下次忘了又得找半天资料。
vue-quill-editor v-html内容不居中或者样式失效
weixin_39457424的博客
12-07 2331
只需要添加class="ql-editor" <div class="ql-editor" v-html="content">
vue2、vue3之富文本编辑器quillEditor的一些问题（使用、字体字号不生效、内容保留样式和去掉样式）
a20001999的博客
05-26 3940
vue2之富文本编辑器quillEditor的一些问题（使用、字体字号不生效、内容保留样式和去掉样式）
vue3.0 vue-quill-editor.rar
09-19
在实际开发中，可能会遇到Vue3.0与Vue-Quill-Editor的兼容性问题，例如生命周期钩子的变化、Prop类型检查的更新等。这时，需要查阅官方文档或社区资源，寻找相应的解决方案。对于Vue CLI 3，要确保项目的构建配置...
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
10-15
总的来说，解决`vue-quill-editor`的图标样式排布错乱问题，主要是通过正确引入和应用Quill的CSS样式，以及合理配置组件的类名。同时，根据项目需求定制工具栏和事件监听，可以进一步提升用户体验。在使用`vue-quill...
vue-quill-editor的使用及个性化定制操作
11-19
import { quillEditor } from 'vue-quill-editor' export default { name: "addJournal", components: { quillEditor }, data() { return { content: "", editorOption: {}, }; }, methods: { ...
关于vue-quill-editor样式失效问题
tianbushengyinuo的博客
10-09 3319
在使用vue-quill-editor的时候，遇到前四个功能全失效的情况， 即加粗、倾斜、下划线、删除线失效， 其原因其实是全局css，我的reset.css是设置了strong（加粗）、em（倾斜）、u(下划线）、s（删除线）默认样式，导致失效，只要对全局css做修改即可。 其他样式失效也可能是这个原因，可作为参考，如代码块没有背景色，在全局css对pre添加背景色即可。 ...
vue-quill-editor 样式不生效的解决方法
qq_41144623的博客
03-15 7360
在main.js引入 import 'quill/dist/quill.snow.css' 在需要展示的页面中用如下元素包裹即可 <div class="ql-container ql-snow"> <div class="ql-editor" v-html="list.content"> </div> ...
Vue2Editor 富文本 （基础）
qq_60658827的博客
07-05 1324
【代码】Vue2Editor 富文本 （基础）
Vue2-editor 富文本编辑器
SongD1114的博客
04-12 9062
Vue2-editor 富文本编辑器
quill-editor中编辑设置编辑框高度导致样式错乱问题解决思路
你好师姐！
11-26 2403
刚学VUE，做了个BBS练手，就试了一下quill这个轻量级的编辑器，结果在设顶编辑器高度的时候出现了样式错乱的问题 从图中可以看到，这个按钮应该是在编辑器下方的，但是实际渲染出来确是在编辑框中，甚至被编辑框覆盖； 出现这个问题的原因是因为我在style里面设置的高度并非编辑框的高度，如果直接设置height是不行的，用开发者工具查一下结构就能知道。 如上图所示，编辑框的高...
文本，Vue-Quill-Editor 设置编辑器中文字的默认字体大小，自定义文字字号
最新发布
weixin_54048131的博客
03-12 2802
Vue-Quill-Editor 设置编辑器中文字的默认字体大小_quill 初始 字体-CSDN博客 [{'size':fontSize}]toolbar工具栏 第三步：CSS样式文件加上这句话 这里借鉴了＊且听风吟的资料，感谢大佬的资料，以上就是置编辑器中文字的默认字体大小，自定义文字字号的方法 最后效果：
vue-quill-editor编辑器编辑之后的内容，在页面渲染时，没有居中、缩进、加粗、斜体等相关样式
cd13849109771的博客
10-25 2439
vue-quill-editor编辑器编辑之后的内容，在页面渲染时，没有居中、缩进、加粗、斜体等相关样式；样式丢失问题 /* 富文本对齐方式 */ .ql-align-center{ text-align: center; } .ql-align-right{ text-align: right; } .ql-indent-1{ padding-left: 16px; } .ql-indent-2{ padding-left: 32px;
vue-quill-editor富文本编辑器使用及配置更改
LONGLONGAGO_RU的博客
06-09 9226
quill-editor支持了常用的功能，但是有2点，需要我们自己定制一下。vue集成quill-editor很简单，网上有很多介绍，自行百度下即可。 1，图片上传：因为编辑器默认是将图片转成base64存储的，而我们实际开发需要将图片存在自己的服务器中。 2，中文汉化：编辑器默认都是英文展示的，在网上也找到了替换成中文的方法。但是太过于繁琐，因为这种方式是重写整个toolbar的div。实际上，...
vue-quill-editor 中部分样式不显示问题
m0_51666430的博客
11-09 1940
前端项目使用了vue-quill-editor 富文本编辑框，在编辑内容时文本样式都能正常使用，但是上传之后查看文本，就会发现有些样式并没用加载出来。分析编辑器中的css样式可知，.ql-editor外层还需要加个class名ql-snow，（前提是已经引用过该css文件。在需要显示文本内容的盒子中，加入类名ql-editor，且其父盒子加上类名ql-show。查看代码能看到，有些标签上面的类并没有编写。
editor修改样式 vue_vue-quill-editor的使用及个性化定制操作
weixin_39524425的博客
12-20 2035
最近在用vue + element ui写一个小应用要用到富文本编辑器，以前做项目都一直都用ueditor，但是看了一下它与vue的兼容性并不好，又对比了几个后，选择了vue-quill-editor。vue-quill-editor基于Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用，正是我想要的☻。这里只介绍基本的安装和部分简单的定制。我翻了很多别人写的东西对我的项目都无效...
vue-quill-editor样式问题
09-07
在使用vue-quill-editor插件时，有一些样式问题需要注意。首先，在组件中引入样式类文件是必要的，可以通过在组件中的style标签中引入样式，或者在组件外部引入样式文件。样式文件的引入可以使用以下代码：、、 ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值