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