vue-quill-editor富文本内容在页面中样式丢失

最新推荐文章于 2026-04-05 09:29:41 发布

原创最新推荐文章于 2026-04-05 09:29:41 发布 · 1w 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue

当前文章被收录于：

Vue

28 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文探讨了在不同项目间展示富文本时遇到的样式错乱问题，并提供了解决方案，包括添加特定class和引入Quill编辑器的样式文件。同时，解决了图片上传后提交失败的413错误。

现象

用富文本的情况有很多，例如在后台管理系统排版好的富文本页面，准备在移动端页面去显示，或者在官网显示，两个项目不在一起，在管理系统排好的样式在显示页面显示的一塌糊涂，为啥呢？大多数情况是样式没有引入。

解决

给容器增加一个class ql-editor，才能正常显示，另外前面是主题类名，不同的主题显示不同的样式

  <link href="http://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
  <link href="http://cdn.quilljs.com/1.3.4/quill.bubble.css" rel="stylesheet">
  <link href="http://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet">

我这边是snow，那么前缀就是ql-snow

<div class="ql-snow ql-editor" v-html="report.foreword"></div>

关于图片上传之后无法提交，报413错误 [ Request Entity Too Large ],解决方法将图片上传到七牛云

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chi1130

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue-quill-editor （vue 、uniapp ）富文本样式失效问题

fakuangjingling的博客

11-30

3731

主要问题是针对于后台框架使用了vue-quill-edit框架创建的富文本到了前端之后没有显示对应的样式。

1 条评论

写评论

vue-quill-editor编辑器编辑之后的内容，在页面渲染时，没有居中、缩进、加粗、斜体等相关样式

cd13849109771的博客

10-25

2710

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;

Quill富文本编辑器：解决提交后丢失部分HTML标签的问题

loop_git667的博客

09-26

1048

这可能会导致我们在后端处理数据时遇到困难，因为我们期望接收到的数据是完整的、包含所有的HTML标签。然而，有时候在使用Quill提交内容后，我们可能会遇到一些问题，其中之一就是丢失部分HTML标签的情况。通过修改Quill的配置，我们可以允许特定的HTML标签通过过滤器，从而确保提交的内容在后端得到正确处理。在上述示例中，我们使用Express框架创建了一个简单的服务器，并定义了一个POST路由用于接收Quill内容的提交。要解决这个问题，我们需要修改Quill的配置，以允许特定的HTML标签通过过滤器。

【Vue】vue2预览显示quill富文本内容，vue-quill-editor回显页面，v-html回显富文本内容

qq_51055690的博客

08-24

1万+

vue富文本编辑器vue-quill-editor的内容的渲染

SpringBoot实战：解决富文本字段返回结果中丢失HTML标签的问题

TechInk的博客

08-13

2331

在开发过程中，我们要充分了解SpringBoot的特性和原理，并善于利用其提供的灵活配置和扩展机制，以便更好地解决问题和满足业务需求。这样，当我们返回包含富文本字段的对象时，JSON序列化工具会自动将HTML标签转义后返回给前端，从而保留了原始的HTML结构。然而，当我们将这些字段返回给前端时，由于默认的转换方式，其中的HTML标签会被忽略或丢失，从而导致页面显示不正常。然而，当我们在前端接收到这些富文本字段时，却发现其中的HTML标签丢失了，导致页面无法正确渲染。下面将介绍两种常见的解决方法。

vue-quill-editor 中部分样式不显示问题

m0_51666430的博客

11-09

2457

前端项目使用了vue-quill-editor 富文本编辑框，在编辑内容时文本样式都能正常使用，但是上传之后查看文本，就会发现有些样式并没用加载出来。分析编辑器中的css样式可知，.ql-editor外层还需要加个class名ql-snow，（前提是已经引用过该css文件。在需要显示文本内容的盒子中，加入类名ql-editor，且其父盒子加上类名ql-show。查看代码能看到，有些标签上面的类并没有编写。

vue-quill-editor富文本 回显数据样式失效

weixin_45799001的博客

04-22

4311

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实现富文本编辑器

最新发布

weixin_27070451的博客

04-05

424

本文详细解析了Vue-quill-editor在PC端和uniapp中富文本样式丢失的问题，提供了5分钟快速修复方案。从正确安装引入、样式文件处理到DOM结构规范，全面覆盖常见问题场景，帮助开发者高效解决样式失效难题，确保富文本内容完美呈现。

vue-quill-editor踩坑记录--富文本内容回显样式不对

weixin_43794749的博客

03-10

5654

使用vue-quill-editor写的富文本，内容在H5使用v-html显示时，样式跟在富文本写的时候样式不一样，字体大小显示不出来。原因：有些类名，在v-html页面是没有找到的。解决: 全局或者局部引入vue-quill-editor的样式文件 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' <div v-html="co.

关于uni-app小程序 Vue-Quill-Editor编辑器的内容在样式丢失

tsang荒男的博客

02-14

3465

前言关于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

若依RuoYi-Vue分离版—富文本Quill的图片支持伸缩大小及布局

qq_20236937的博客

06-19

3233

若依RuoYi-Vue分离版—富文本Quill的图片支持伸缩大小及布局、工具栏带中文提示Quill的图片相关1.在vue.config.js 文件中添加一下内容2.下载安装插件3.引入插件 Quill的图片相关 1.在vue.config.js 文件中添加一下内容 const webpack = require('webpack'); new webpack.ProvidePlugin({ 'window.Quill': 'quill/dist/quill.js',

Vue-Quill-Editor在Vue与Uniapp中的样式兼容性解决方案

weixin_29021195的博客

03-15

554

本文深入解析了Vue-Quill-Editor在Vue与Uniapp项目中样式失效的根本原因，并提供了完整的解决方案。核心在于正确引入Quill的CSS文件，并为渲染内容包裹`ql-container`与`ql-editor`类名容器。针对Uniapp跨端环境，文章详细介绍了手动拷贝样式文件、全局引入及结构适配等特殊处理方案，确保富文本内容在不同平台均能完美展示。

vue 使用富文本编译器之vue-quill-editor中一个组件使用两个quill-editor导致二次编辑时富文本光标闪退问题解决办法一

qq_1307495的博客

04-11

1580

一安装quill-editor 使用vue-quill-editor编译器时需要先安装 quill-editor npm install vue-quill-editor --save 二使用在需要的组件中引入vue-quill-editor 引入需要用到的基本样式以及组件 import { quillEditor } from 'vue-quill-editor' import 'qui...

Vue Quill 富文本编辑器 Class 转行内样式完全指南

deary

11-26

1263

本文介绍了将Quill编辑器生成的CSS class转换为行内样式的方法，解决在移动端、邮件、PDF等场景下的样式显示问题。文章详细分析了Quill编辑器使用class控制样式的局限性，并提供了完整的TypeScript实现代码，包括图片处理、字体大小、颜色、背景色、对齐方式等各类样式的转换逻辑。通过将class转换为style属性，确保内容在各种环境下都能正确显示样式。

告别编辑器配置烦恼：vue-quill-editor两种安装方案实测对比

gitblog_00112的博客

11-06

963

你是否还在为富文本编辑器的环境配置浪费时间？是否纠结该用NPM还是CDN方式集成？本文将通过实测对比，帮你3分钟内搞定vue-quill-editor的环境搭建，无论你是Vue新手还是资深开发者，都能找到最适合的方案。读完本文你将获得：两种安装方式的详细步骤、优缺点分析、常见问题解决方案，以及项目结构的清晰认知。 ## 关于vue-quill-editor vue-quill-editor是基