vue 富文本框插件quill-editor 踩坑

最新推荐文章于 2024-06-15 21:13:53 发布
最新推荐文章于 2024-06-15 21:13:53 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liangrongliu1991/article/details/100523621
版权

（1）最新版本的需要单独引入样式
（2） 多个页面中不能存在多个quill-editor，不然会出现这样的情况
将toolbar的id设置成动态
在这里插入图片描述在这里插入图片描述
（3）禁用quill-editor
注意：最好用this.quill.enable，用this.quill.disable的话设置禁用后，想还原设置this.quill.disable(false)是没效果的

this.quill.enable(false) 
this.quill.disable(true)
風缘
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于我使用vue-quill-editor遇到的一些“坑”
郊眠寺
09-15 919
则此处的类型配置默认为。
vue-quill-editor的简单使用（uniapp处理结构rich-text不支持video标签的解析）
weixin_47517731的博客
09-19 2181
3：安装图片插件（可选）3-1：video的处理js文件（新建一个quill-video.js文件）（可选）二：uniapp处理结构（由于rich-text不支持video标签的解析）1：在插件市场找到（uParse 富文本解析。5:methods中的事件。4：data中定义相关数据。4：js处理(img标签)5：css处理video。
quill-editor：Vue轻量级富文本编辑器-Vue-Quill-Editor
最新发布
2401_85124837的博客
06-15 661
3、代码event"@focusonEditorFocusevent)”OK,搞定，简洁的富文本编辑器就展现在你眼前了，另外附上API。4、自定义 toolbar 菜单placeholder: “请在这里输入”,modules:{toolbar:[[‘bold’, ‘italic’, ‘underline’, ‘strike’], //加粗，斜体，下划线，删除线[‘blockquote’, ‘code-block’], //引用，代码块。
vue使用vue-quill-editor上传图片的一些坑
热门推荐
:：：::的博客
04-12 1万+
最近项目中使用了vue-quill-editor，记一下遇到的一些问题： 首先使用element-ui画出来页面： <template> <div class="app-container" append-to-body> <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :b...
vue-quill-editor编辑器踩坑
sunny327的专栏
09-02 8417
vue-quill-editor github 传送门：https://github.com/surmon-china/vue-quill-editor quill编辑器官网：https://quilljs.com/docs/quickstart/ quill编辑器中文文档：https://bingkui.gitbooks.io/quill/content/documentation/quic...
Vue组件引入报错解决方法
欢迎关注公众号“雨林寻北”，添加个人微信codetrend（备注技术）。
02-22 8737
异步引入产生的组件延迟引入，一个同步异步问题。
element + vue-quill-editor + 七牛云 实战报错总结
不二喵老师
03-19 1166
安装vue-quill-editor npm install vue-quill-editor --save 安装 七牛云 npm install qiniu-js 官方文档： 然后 在需要的页面引入 importqsfrom'qs' import{quillEditor}from'vue-quill-editor' import'qui...
vue富文本插件vue-quill-editor的使用
illa123的博客
11-13 1265
注意：对浏览器兼容性要求高的，请勿使用vue-quill-editor，vue-quill-editor在IE10以下会报错，报错的原因是它底层采取的是quill.js，而quill.js采用的是html5的新属性classList 1、安装vue-quill-editor npm install vue-quill-editor --save 2、在main.js文件引入 impo...
vue富文本编辑器 vue-quill-editor.js quill版本1.3.6
07-01
vue富文本编辑器vue-quill-editor.js quill版本1.3.6 使用教程 ： vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案 ...
vue3.0 vue-quill-editor.rar
09-19
Vue-Quill-Editor是一款基于Quill的 Vue.js 富文本编辑器组件，提供了丰富的文本格式化选项，如字体、字号、颜色、列表等，同时支持图片和视频的插入。在Vue3.0环境下使用Vue-Quill-Editor，需要确保组件与新版本的...
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
而vue-quill-editor是Vue的一个插件，用于集成强大的Quill富文本编辑器。 首先，要使用vue-quill-editor，我们需要通过npm安装它： ```bash npm install vue-quill-editor --save ``` 接下来，在项目的`main.js`...
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
10-15
主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...
Vue-Quill-Editor富文本编辑器的使用教程
12-29
本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法，供大家参考，具体内容如下 先看效果图：    1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor...
富文本的使用Vue3-----使用vue-quill-editor页面富文本没有出现问题，该如何解决，这里导致问题出现的原因，是使用quill-editor组件时，如果v-model你绑定了数据
weixin_54048131的博客
02-08 859
【代码】富文本的使用Vue3-----使用vue-quill-editor页面富文本没有出现问题，该如何解决，这里导致问题出现的原因，是使用quill-editor组件时，如果v-model你绑定了数据。
富文本编辑器或div写的文本框转义字符不识别问题
hong0114的博客
11-30 1327
这是昨天测试给我提的一个bug，富文本编辑器或者div写出来的文本框里面得转义符不会被后台识别，于是乎请教了一位公司大佬他说很简单，并且送了在下一下段代码： export const removeLabel = (val, len = 54) => { const span = document.createElement('span') span.innerHTML = val return (span.innerText || '').slice(0, len).replac...
vue-quill-editor 富文本样式失效
且听风吟的博客
09-08 3432
解决方法：引入样式文件，将回显的html内容，包裹在一个div容器中，并加上对应的class。 引入样式： import 'quill/dist/quill.snow.css' 回显的 div 加上对应的class： <div class="ql-container ql-snow"> <div class="ql-editor" v-html="formData.content" /> </div> 问题解决啦： ...
Vue 富文本编辑器插件 vue-quill-editor 坑！
weixin_44892327的博客
10-31 1668
Vue 富文本编辑器插件 vue-quill-editor 坑！
vue-quill-editor 中部分样式不显示问题
m0_51666430的博客
11-09 1840
前端项目使用了vue-quill-editor 富文本编辑框，在编辑内容时文本样式都能正常使用，但是上传之后查看文本，就会发现有些样式并没用加载出来。分析编辑器中的css样式可知，.ql-editor外层还需要加个class名ql-snow，（前提是已经引用过该css文件。在需要显示文本内容的盒子中，加入类名ql-editor，且其父盒子加上类名ql-show。查看代码能看到，有些标签上面的类并没有编写。
vue-quill-editor富文本内容在页面中样式丢失
chi1130的博客
08-20 1万+
现象 用富文本的情况有很多，例如在后台管理系统排版好的富文本页面，准备在移动端页面去显示，或者在官网显示，两个项目不在一起，在管理系统排好的样式在显示页面显示的一塌糊涂，为啥呢？大多数情况是样式没有引入。 解决 给容器增加一个class ql-editor，才能正常显示，另外前面是主题类名，不同的主题显示不同的样式 <link href="http://cdn.quilljs.com/1...
vue2项目vue-quill-editor插件使用
07-28
您好！对于Vue 2项目中使用vue-quill-editor插件，您可以按照以下步骤进行操作： ...这样，您就可以在Vue 2项目中使用vue-quill-editor插件来实现富文本编辑功能了。希望对您有帮助！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值