vue项目中使用quill富文本编辑器控制台报错

827 阅读1分钟

问题描述:

在vue2项目中使用vue-quill-editor富文本编辑器时,浏览器控制台报错:

image.png

原因:

DOMNodeInserted事件已被弃用,这个事件用于监听文档树中节点的插入操作。由于性能问题和兼容性问题,现代浏览器不再支持这个事件。

需要使用 MutationObserver 替代 DOMNodeInsertedMutationObserver 是 DOM 变动观察器的接口,它提供了一种方法来监听 DOM 树的变化。

解决办法:

针对vue-quill-editor插件的解决办法是:修改源代码,具体步骤:

1、在node_modules中找到quill源代码,具体路径如图:

image.png

2、找到quill.js,在该文件中找到第4237行代码(当前版本是这个行数,不同版本行数可能不一样)

_this.domNode.addEventListener('DOMNodeInserted', function () {});

image.png

3、将该行代码替换为

new MutationObserver(function () {}).observe(_this.domNode, { childList: true });

image.png