在非vue项目中使用vue-quill-editor实现粘贴纯文本功能
在一个非vue项目中，我们需要使用vue-quill-editor，并实现粘贴纯文本功能。具体要求如下：
粘贴富文本时，将其转换为纯文本。插入文本后，光标应移至插入文本后方。文本样式不受当前光标位置样式影响。
解决方案
可以使用quill提供的clipboard.addmatcher方法来自定义粘贴文本。具体步骤如下：
立即学习“前端免费学习笔记（深入）”；
在clipboard.addmatcher中，将粘贴文本获取为纯文本。创建新的delta对象并插入纯文本。返回创建的delta对象。
修改后的代码示例：
initquill() { const node_type = { element_node: 1 }; const quill = this.$refs.myquilleditor.quill; quill.clipboard.addmatcher(node_type.element_node, function (node, delta) { const plaintext = node.innertext; const delta = quill.import("delta"); return new delta().insert(plaintext); });},
登录后复制
注意，原先使用inserttext方法可能会受到外部样式的影响。而delta api可以从头开始进行编辑，而不受当前操作索引的影响。
完整代码示例如下：
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, }, ]);},
登录后复制
以上就是如何在非Vue项目中使用vue-quill-editor实现纯文本粘贴？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2648791.html
