javascript - 如何在非Vue项目中使用vue-quill-editor实现粘贴纯文本功能？
在一个非Vue项目构建的、仅是普通的JavaScript项目里，只是简单地在页面引入了quill.js、vue-quill-editor.js、vue.js。
- 需要实现在vuequilleditor中粘贴文本时，将粘贴的富文本转换文纯文本，并插入到光标所在位置。
- 如果光标选中了部分内容，需要将选中的内容替换为粘贴文本。
- 插入文本后，需要修改光标位置到插入文本的后面
- 即使当前光标所在的位置（选中的文本）带有css样式，粘贴后的文本也不能带有样式。
<html><head> <link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.core.css"> <link rel="stylesheet" href="https://unpkg.com/quill@1.3.7/dist/quill.snow.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script> <script src="https://unpkg.com/quill@1.3.7/dist/quill.js"></script> <script src="https://unpkg.com/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script></head><body> <div id="main"> <div style=" height: 100px;"> <quill-editor :options="editorOption" ref="myQuillEditor"></quill-editor> </div> </div> <script type="application/javascript"> Vue.use(window.VueQuillEditor) var toolbarOptions = [ ['bold', 'underline'], [{ 'color': ['blue', 'red', 'black'] }], ['link'], ['clean'] ] var main = new Vue({ el: "#main", data: { QuillEditors: [], editorOption: { scrollingContainer: null, modules: { toolbar: toolbarOptions }, theme: 'snow' }, }, methods: { } }) </script></body></html>我尝过使用mounted函数，监听‘paste’事件，然后获取剪切板内容的文本格式（text/plain），再调用quill的insertText方法将文本内容插入。
但是插入后，文本内容会受到 插入index所在的delta的样式的影响？
同样，删除时使用deleteText、insertText方法，结果也都不理想。
共有1个答案
不确定使用insertText会不会受到外部样式的影响，但是QuillJs提供了使用Delta来编辑内容的api，你可以使用updateContents来更新当前富文本编辑器的内容。Delta本身是不包含当前操作 Index 的，所有操作都是从头开始，可以用retain保留光标index之前的内容。
https://quilljs.com/docs/api#updatecontents
https://quilljs.com/docs/delta#playground
但是我在测试过程中，当index === 0的时候会报错，感觉是QuillJS的问题，你可以对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, }, ]);},-
本文向大家介绍Vue-Quill-Editor富文本编辑器的使用教程，包括了Vue-Quill-Editor富文本编辑器的使用教程的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法，供大家参考，具体内容如下 先看效果图： 1、下载Vue-Quill-Editor 2、下载quill（Vue-Quill-Editor需要
-
在Vue项目实现文件下载的时候遇到一个问题，无论是使用a标签还是使用windown.open(url)都只会在网页打开预览，但是都不能下载，请问这是什么问题？应该如何去避免从而实现下载功能呢？查了好久资料，来来去去都是那一片文章抄来抄去，实在让人难受！！！这些粘贴怪真恶心！！！
-
本文向大家介绍详解Vue基于vue-quill-editor富文本编辑器使用心得，包括了详解Vue基于vue-quill-editor富文本编辑器使用心得的使用技巧和注意事项，需要的朋友参考一下 vue-quill-editor的guthub地址 ，现在市面上有很多的富文本编辑器，我个人还是非常推荐Vue自己家的vue-quill-deitor，虽然说只支持IE10+,但这种问题，帅给别人吧！ 那
-
问题内容： 这是Web上RTE的常见问题之一。您能否指导我完成以下步骤： 粘贴为纯文本 保留HTML，但删除WORD / HTML样式 我想直接在粘贴（paste_preprocess回调）上执行此操作，而无需打开粘贴插件提供的对话框。 有什么想法/经验吗？ 谢谢， 问题答案： 这就是我要做的粘贴纯文本。 1. paste_preprocess设置（在tinymce init中） 2.函数stri
-
本文向大家介绍vue-quill-editor+plupload富文本编辑器实例详解，包括了vue-quill-editor+plupload富文本编辑器实例详解的使用技巧和注意事项，需要的朋友参考一下 1,先给vue项目中下载vue-quill-editor依赖npm install vue-quill-editor --save 2,下载plupload依赖npm install pluplo
-
本文向大家介绍vue-quill-editor富文本编辑器简单使用方法，包括了vue-quill-editor富文本编辑器简单使用方法的使用技巧和注意事项，需要的朋友参考一下 文章刚开始先来介绍一下vue-quill-editor富文本编辑器的简单使用，具体操作步骤如下： 安装： main.js： 在需要使用的地方： 看到了一个网友分享的如何禁用vue-quill-editor 富文本编辑器，分享