在非vue项目中使用vue-quill-editor实现粘贴纯文本功能
在一个非vue项目中，我们需要使用vue-quill-editor，并实现粘贴纯文本功能。具体要求如下：
解决方案
可以使用quill提供的clipboard.addmatcher方法来自定义粘贴文本。具体步骤如下：
立即学习“前端免费学习笔记（深入）”；
修改后的代码示例：
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实现纯文本粘贴？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
496
