2021-11-01 富文本编辑器Vue-Quill-Editor 踩坑之路
Vue-Quill-Editor 基于 Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用。
相对于ssr,spa是通过component进行工作 ssr和spa的区别
1 踩坑之路
按照官方例子步骤操作会报错:imports of undefined
按照报错调用栈,读了源码发现undefined本来是要指向quill的,看了一下quill是个对象,里面三个属性,这里试图将quill的属性挂到window上
main.js
import Quill from 'vue-quill-editor'window.Quill = Quill.Quill
window.install = Quill.install
window.quillEditor = Quill.quillEditor
console.log(Quill)
会报register的错误,这个网上踩坑的也很多
版本选择1.0.0不会这个错误,但是使用时会报错:node节点类型错误,这个网上踩坑的也很多
github解决方案:在配置文件声明quill插件,我这里修改vue.config.js文件不好使
webpack内置的provideplugin插件报错,需安装本地webpack,但是出了版本错误
回到最初的起点:npm install --save-dev webpack 卷土重来
Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin’丢插件了
删掉打包文件
2 解决问题了
- 发现使用@1.0.0,可在右下角展示出来拖拽工具(弹窗里不能显示resize拖拽工具(样式定位问题),所以决定先在单独的页面调试好了再加弹窗)
报错一共有三种
1. 在拖拽图片调整大小一次是好的,鼠标松开再点后就会报错,要移除的子节点不是个dom对象
Node.removeChild()
Failed to execute ‘removeChild‘ on ‘Node‘: parameter 1 is not of type ‘Node‘.
找到node-modules里的依赖包quill-image-resize-module,打印那个节点是undefined,加个判断,打个补丁
2. 拖拽调整大小一次后,再次拖拽没反应
严谨的我发现是这块源码阻塞了
3. 按住图片调整位置时,发现图片以undefined为参数发了个上传图片的请求,离谱
我这边不需要实现调整位置,drop只用于粘贴图片,直接打开node-modules里的依赖包quill-image-extend-module,反手一个禁用请求(file为空时)
不报错了,而且能用(拖拽调整大小,上传服务器图片,粘贴上传)
附:
如何修改 node_modules 里的文件
3 让拖拽工具展示在弹窗上
原因:
仔细查看dom树发现是z-index
的问题。CSS z-index 属性是有继承性的
el的弹窗z-index是计算得出的2005,而我们的拖拽工具div被放置在根元素#app里(与弹窗平级),z-index并未继承到弹窗
解决:
方法1: 修改appendchild 的父元素,让这个div以el的弹窗为父级,继承z-index
方法2: 修改z-index样式,搞清楚el dialog怎么设置z-index ???
,然后给拖拽工具也加上弹窗的z-index
我这边采用的方法1,观察源码发现,constructor构造器接收一个options对象用于配置,我们通过自定义的配置属性传递信息(工具要挂到的父元素的id值)
然后拿到id后,赋给环境
然后将我们新添加的元素通过id放入这个父元素
效果还行:
绿色的是我们的弹窗(父元素),五个红的是新添加的五个方块(子元素)
4 弹窗中展示的拖拽工具位置不对(滚动弹窗后)
像这样:
结合源码朕断定,拖拽工具目前 计算的是相对于视口
的绝对位置,需要在这个基础上加上滚动距离(监听滚动事件)。
Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
原本为五个元素设置的位置样式(缺考虑滚动长度):
我的改动:
监听元素的滚动事件,获取滚动长度。
妙手回春:
趁早弃坑,改用其他插件岂不妙哉
2021-11-01 富文本编辑器Vue-Quill-Editor 踩坑之路相关推荐
- WangEditor富文本编辑器图片上传踩坑之路
最近由于业务需求,需要用到富文本编辑器,找寻了好久,起初想使用百度的ueditor,但在使用的过程中实在是遇到了太多的坑,于是另外锁定了一款富文本编辑器--wangEditor.这是一款轻量级的富文本 ...
- tinymce--一款非常好用的富文本编辑器 VUE如何集成tinymce编辑器
博客(coder的自我修养)原文链接:tinymce--一款非常好用的富文本编辑器 vue集成tinymce编辑器 - coder的自我修养 TinyMC编辑器简介 TinyMCE是一款易用.且功能强 ...
- 百度富文本Ueditor图片上传趟坑之路
之所以写这片文章是自己在使用Ueditor当中,自己遇到的一些问题整理一下 1. 项目说明:使用Ueditor的项目是一个后台管理的项目,采用maven搭建的ssh框架另外添加了redis等组件,当中 ...
- quill——简单的富文本编辑器
先介绍一下一般网页如何实现 quill 富文本编辑器 引入 quill.js 文件 <script src="https://cdn.quilljs.com/1.3.3/quill.j ...
- quill 富文本编辑器
富文本quill 富文本框中上传图片的缩放功能 vue.config.js添加如下配置 import "./resizeImg.js"➡ resizeImg.js下载链接 3.以下 ...
- Flask博客实战 - 集成富文本编辑器Quill
富文本编辑器Quill 为什么需要集成富文本编辑器? 一个博客最主要的功能是什么,那就是写作,如果不能对我们发布的内容进行排版美化,那么我们所发布的内容又有什么意义? 对于阅读者来说也是非常的不友好和 ...
- 前端Quill实现富文本编辑器
目录 前言 Quill 介绍 Quill 简单实现 效果 前言 网页上经常会需要用户输入一些文本或者代码块,所以需要富文本编辑器来支持.常见的富文本编辑器有Quill.Draft.js.TinyMCE ...
- 在Vue中使用CKEditor5富文本编辑器
在项目中遇到富文本编辑器需要实现粘贴图片的功能,使用场景:如用户在其他地方截图可以直接在富文本编辑器内粘贴. 找了一圈市面上开源免费的富文本编辑器,最后选中CKEditor.ckeditor doc ...
- quill富文本编辑器quill粘贴图片上传服务器
强大的富文本编辑器:quill github:32k start++,:https://github.com/quilljs/quill quill粘贴图片上传服务器 <link href=&q ...
- 渲染富文本编辑器并设置富文本编辑器的高度
目标:富文本编辑器 vue-quill-editor 的基本使用:vue-quill-editor - npm 一.渲染富文本编辑器 运行如下的命令,在项目中安装富文本编辑器: npm i vue-q ...
最新文章
- codeforces831c 思维
- 如何阅读《深入理解计算机系统》?(文末送书)
- python程序代码_python基础二
- datetime-local 传时间戳_传世经典,此生必读——《呼兰河传》
- Flutter布局锦囊---带彩条的文本字段
- 字符串处理类库_CharString
- 设计:抽象类类还是接口
- chr() 、ord()
- 电脑有网但是有的软件显示无网络连接服务器,有网络连接,但浏览器不能上网怎么办?电脑高手教你怎么解决...
- 【强化学习】 Nature DQN算法与莫烦代码重现(tensorflow)
- 新手电脑硬件软件故障解答(三)
- 如何将NCM转换成MP3 - NCM转MP3转换软件
- java随机生成车牌号函数
- http请求限制和http连接限制
- 数据库课程设计--淘宝购物订单系统
- google搜索技巧——程序员推荐
- 给自己5个月,月薪1万唾手可得!
- asterisk konference 视频会议,录音、监听,强插等的extensions.conf的命令 和 Asterisk 几个重要配置文件举例说明
- 【BDTC 2016】专访三未信安鹿淑煜:大数据安全中的云密码技术实践
- 干货 :浅谈云音乐活动数据分析体系