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

给容器增加一个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 ],解决方法将图片上传到七牛云

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容器,并加上对应 1,先给vue项目下载vue-quill-editor依赖npm install vue-quill-editor --save 2,下载plupload依赖npm install plupload --save 3,在组件分别引入对应的js import { quillEditor }from 'vue-quill-editor' import '@/assets/js/crypto1/crypto/crypto.js' import '@/assets/js/crypto1/hmac/hmac.js' import '@/assets/js/crypto1/sha1/sha1.js' 前端项目使用了vue-quill-editor 富文本编辑框,在编辑内容时文本样式都能正常使用,但是上传之后查看文本,就会发现有些样式并没用加载出来。分析编辑器的css样式可知,.ql-editor外层还需要加个class名ql-snow,(前提是已经引用过该css文件。在需要显示文本内容的盒子,加入类名ql-editor,且其父盒子加上类名ql-show。查看代码能看到,有些标签上面的类并没有编写。 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回显时字体大小样式丢失问题 如图,在回显编辑器内容时,发现文本内容的字色,下划线等样式均能使用,但是字体的大小无法统一 将其转换成html格式输出后发现 如图,在具体变化大小的字前都定义了一个class 查阅资料得知要想文本的样式正确显示,需要在回显的div上增加一个class=”ql-editor”的class名,来确保子元素样式被匹配到 <div class="ql-container"> <div class="q 啰啰嗦嗦的序言(可看可不看): 先说下我的需求,富文本新增一个表格需求,富文本已实现(增删查改),表格新增要一起同步这四个场景, 开始我用的vue-quill-editor,结果发现坑太多,我查看的时候没法把拿到的数据丢到quill里面去修改,只能v-html展示,还有缓存以及验证的一些问题,只是想在富文本加个表格,发现用vue-quill-editor要改的地方太多,果断弃坑了,网上找了下发现wangEditor貌似不错,还有团队在维护, 支持Vue、React、Angular等框 富文本传参时候,总是莫名其妙丢失变成 ‘<p style=’ ,究竟是为什么呢 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,... 今天测试反馈了一个bug,后台商品管理的富文本编辑器,在进行标签页切换的时候都会造成富文本内容清空,其他属性值正常显示。听到这问题时,我一个后端仔怎么解决这么"高难度"的问题。先是各种浏览器找解决办法,但也没有想要的,没办法了只能硬着头皮上了。 <!-- 商品详情 --> <el-form-item label="商品详情:"> <tinymce v-model="dataForm.detail.detail" @loadingShow="loadin