在非vue项目中使用vue-quill-editor实现粘贴纯文本功能
非vue项目中引入vue-quill-editor时，粘贴富文本转换为纯文本并插入光标所在位置的需求，可以按照以下步骤解决：
首先，修改载入库的顺序，确保quill.js加载顺序在vue-quill-editor.js之前。
然后，在mounted生命周期钩子中，通过clipboard.addmatcher方法添加自定义粘贴内容匹配器：
mounted() { const node_type = { element_node: 1 }; const quill = this.$refs.myquilleditor.quill; quill.clipboard.addmatcher(node_type.element_node, (node, delta) => { const plaintext = node.innertext; const delta = quill.import('delta'); return new delta().insert(plaintext); });}
登录后复制
上述代码中，通过自定义匹配器，将粘贴的富文本转换为纯文本。需要注意的是，原来的一些 quill 功能可能会失效。
立即学习“前端免费学习笔记（深入）”；
其次，为了解决光标位置及样式问题，可以采用更新内容的 delta 方法，如下：
pasteListenerCb(event) { event.preventDefault(); let paste = (event.clipboardData || window.clipboardData).getData('text'); this.clipboardData = paste; const pasteLength = paste.length; const quill = this.$refs.myQuillEditor.quill; const index = quill.selection.savedRange.index; quill.updateContents([ { retain: index, }, { insert: paste, }, ]);}
登录后复制
通过 delta 的 retain 和 insert 操作，将之前光标位置的内容保留，并在指定位置插入纯文本。注意，index 为 0 时可能会引发错误，需要进行相应的处理。
以上就是如何在非Vue项目中使用vue-quill-editor实现纯文本粘贴功能？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2648762.html
