在非Vue项目中用vue-quill-editor实现纯文本粘贴的攻略

本文介绍如何在非Vue项目中，利用vue-quill-editor实现纯文本粘贴功能。 传统方法无法完全避免粘贴文本受周围样式影响，本文提供了一种基于quill.js的`clipboard.addMatcher`方法的解决方案。通过自定义粘贴行为，将富文本转换为纯文本后插入光标处，实现无样式纯文本粘贴，并解决光标位置问题。 文章包含详细代码示例，帮助开发者在普通JavaScript项目中轻松集成该功能，提升用户粘贴体验，适用于需要纯文本编辑器的各种应用场景。

在非Vue项目中利用vue-quill-editor实现纯文本粘贴

本文讲解如何在普通JavaScript项目中，使用vue-quill-editor实现纯文本粘贴功能。此功能需满足以下条件：粘贴时将富文本转换为纯文本并插入光标处；若已选中文本，则替换选中内容；粘贴后光标移动至文本末尾；粘贴文本无任何样式，不受周围样式影响。

文中假设项目已包含quill.js、vue-quill-editor.js和vue.js。直接使用insertText方法或监听paste事件获取纯文本（text/plain）无法完全满足需求，因为插入文本可能受周围样式影响。

解决方案的核心是利用quill.js的clipboard.addMatcher方法。此方法自定义粘贴行为，实现富文本到纯文本的转换再插入。以下代码片段展示如何在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);
  });
}

代码首先定义节点类型常量NODE_TYPE，获取quill实例，并用clipboard.addMatcher添加匹配器。该匹配器拦截所有元素节点( NODE_TYPE.ELEMENT_NODE )的粘贴事件，将节点的纯文本内容(node.innerText)转换为新的delta对象插入编辑器。 这有效过滤了富文本格式，只保留纯文本，避免样式干扰。

文中也提及了结合quill.updateContents方法和delta对象更精细地控制内容更新，处理光标位置和index === 0错误。但quill.updateContents方法需要更复杂的delta对象处理，涉及retain操作保留光标前文本，此处不再赘述。 读者可根据实际需求和文中代码片段进行调整优化。

好了，本文到此结束，带大家了解了《在非Vue项目中用vue-quill-editor实现纯文本粘贴的攻略》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！