在非Vue项目中使用 vue-quill-editor 实现纯文本粘贴，可以通过以下步骤来实现：
首先，确保你已经安装了 vue-quill-editor 和 quill 依赖。如果没有安装，可以使用以下命令进行安装：
npm install vue-quill-editor quill --save
在你的项目中引入 Quill 和 VueQuillEditor。假设你使用的是普通的 JavaScript 项目，可以通过以下方式引入：
import Vue from 'vue';
import VueQuillEditor from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
Vue.use(VueQuillEditor);
创建一个 Vue 实例，并在其中使用 vue-quill-editor 组件。
new Vue({
el: '#app',
data() {
return {
content: '',
editorOption: {
modules: {
clipboard: {
matchers: [
['div', (node, delta) => {
// 将 div 标签转换为纯文本
return new Quill.import('delta')().insert(node.innerText || node.textContent);
}],
['p', (node, delta) => {
// 将 p 标签转换为纯文本
return new Quill.import('delta')().insert(node.innerText || node.textContent);
}],
// 可以根据需要添加更多的标签处理
]
}
}
}
};
},
template: `
<div id="app">
<quill-editor v-model="content" :options="editorOption"></quill-editor>
</div>
`
});
为了确保粘贴的内容是纯文本，你可以通过 clipboard 模块的 matchers 来处理粘贴的内容。在上面的代码中，我们已经配置了 clipboard 模块，将 div 和 p 标签转换为纯文本。
确保你的项目已经正确配置并运行，然后你可以在页面上看到 vue-quill-editor 编辑器。当你粘贴内容时，编辑器会自动将粘贴的内容转换为纯文本。
matchers 中添加相应的处理逻辑。<script> 标签直接引入 Quill 和 VueQuillEditor，然后按照类似的方式进行配置。以下是一个完整的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Quill Editor Example</title>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
<div id="app">
<quill-editor v-model="content" :options="editorOption"></quill-editor>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
<script>
Vue.use(window.VueQuillEditor);
new Vue({
el: '#app',
data() {
return {
content: '',
editorOption: {
modules: {
clipboard: {
matchers: [
['div', (node, delta) => {
return new Quill.import('delta')().insert(node.innerText || node.textContent);
}],
['p', (node, delta) => {
return new Quill.import('delta')().insert(node.innerText || node.textContent);
}]
]
}
}
}
};
}
});
</script>
</body>
</html>
通过以上步骤，你可以在非Vue项目中使用 vue-quill-editor 实现纯文本粘贴功能。