三行代码,完美解决vue-quill-editor富文本样式失效问题

简介: 只用三行代码哦

今天开发vue项目中遇到个问题,富文本回显失效,首先排查的css文件是否引入,后面发现不是文件引入的问题,只需要一个Calss 完美解决样式失效问题
image.pngimage.png编辑
vue-quill-editor富文本样式失效
image.pngimage.png编辑
检查下css文件是否引入成功
image.pngimage.png编辑
重点检查v-html 回显代码片段
解决方法:将回显的html内容,包裹在一个div容器中,并加上对应的class,
代码如下:

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

设置好后,咱们看下效果~ 完美运行~~
image.pngimage.png编辑

相关文章
|
存储 JavaScript 前端开发
【前端系列】- 富文本组件(mavon-editor)
mavon-editor是一款基于vue的markdown编辑器,可以用来做文本的编辑,比如是某种业务需要发送公告、个人博客等,都可以用到,操作也十分简单。
3983 0
【前端系列】- 富文本组件(mavon-editor)
|
6月前
|
JavaScript
Vue在Element UI下使用富文本框插件quill-editor(我个人不推荐用这个复杂的富文本插件)
Vue在Element UI下使用富文本框插件quill-editor(我个人不推荐用这个复杂的富文本插件)
|
1月前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
61 0
先文章写在自己的富文本上,痛点,商业模式,支持文章转载,搭建工具------自媒体平台之间快速上传文章的方法,利用自己的富文本编辑器进行上传
先文章写在自己的富文本上,痛点,商业模式,支持文章转载,搭建工具------自媒体平台之间快速上传文章的方法,利用自己的富文本编辑器进行上传
vue2-editor富文本基础使用方法
vue2-editor的入门使用准备工作: 使用 npm install vue2-editor --save 安装到项目中去; 使用 在需要的单文件内引入 import { VueEditor } from 'vue2...
2220 0
|
6月前
|
存储 Linux 编译器
vim编辑器和gcc/g++编辑器的使用讲解
vim编辑器和gcc/g++编辑器的使用讲解
152 2
|
4月前
|
开发工具
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
|
5月前
|
开发工具
Vim 编辑器:高效文本编辑的瑞士军刀
**Vim 概览:** Vim 是一个功能丰富的文本编辑器,以其高度可定制性著称。文章介绍了 Vim 的高效使用技巧,包括快捷打开文件、命令行模式下的常用命令、查找与替换、删除和复制文本。还讨论了配置 `.vimrc` 文件以自定义设置,如改变 leader 键、设置缩进和高亮,并展示了安装插件如 vim-airline 和 vim-snazzy 的方法。通过这些技巧,用户能提升 Vim 使用效率。
65 5
|
5月前
|
Ubuntu 搜索推荐 Linux
Linux的Vim编辑器详解
Linux的Vim编辑器详解