PunkMaccccc

富文本编辑器quill，无法在光标位置插入视频内容？

vue项目中使用了富文本编辑器quill v1.3.7，然后写了自定上传相关业务代码，由于需要支持大文件上传，所以自定义里面做了分片上传逻辑，分配上传完成后，最后调用接口返回文件地址等信息，拿到信息后，需要插入到quill富文本编辑器中，这个测试下来没什么问题，但是当插入大文件时，通过 let length = that.editor.getSelection().index//获取当前鼠标焦点位置 that.editor.insertEmbed(length, 'video',{src:data.Path}) 如上代码插入视频却总是报错，通过调试发现"that.editor.getSelection()"返回null，但是上传小一点的视频文件却没问题，插入大、小视频逻辑代码都是一样的（走的形同的代码逻辑），只是大文件分片多，上传时间长，给人的感觉就是页面上时间处于“静止”状态，quill编辑器对象像“待机”了一样，请问怎么回事？

无心插柳柳成萌

quill包下载到本地项目里引入不成功?

quill下载到项目里引入不成功 使用的版本是:"quill": "^2.0.0-rc.0", 根据github版本下载然后打包出来的dist文件放到本地项目目录. 项目package.json修改为"quill": "./packages/quill" 报错信息如下: The requested module '/packages/quill/quill.js' does not provide an export named 'default' 希望能把quill包引入到本地项目中运行,不依赖node_modules下的依赖 /packages/quill/quill.js代码如下: https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241003/2073c64909531cc8e17bdc1116e9a8d9.png /packages/quill目录下还有quill.d.ts 代码如下: https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241003/443fa10a242f82f178fef44c99ee359f.png 但是core目录下也是不可执行的JS代码. packages/quill/core/quill.js https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241003/cd5f718efc9a27bea9e28bb2838caf81.png packages/quill/core/quill.d.ts https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241003/887870b4b52a2d8c8bf293009d8ee431.png

元气满满才怪啊

如何在非Vue项目中使用vue-quill-editor实现粘贴纯文本功能？

在一个非Vue项目构建的、仅是普通的JavaScript项目里，只是简单地在页面引入了quill.js、vue-quill-editor.js、vue.js。 1. 需要实现在vuequilleditor中粘贴文本时，将粘贴的富文本转换文纯文本，并插入到光标所在位置。 2. 如果光标选中了部分内容，需要将选中的内容替换为粘贴文本。 3. 插入文本后，需要修改光标位置到插入文本的后面 4. 即使当前光标所在的位置（选中的文本）带有css样式，粘贴后的文本也不能带有样式。 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: { } }) 我尝过使用mounted函数，监听‘paste’事件，然后获取剪切板内容的文本格式（text/plain），再调用quill的insertText方法将文本内容插入。 但是插入后，文本内容会受到 插入index所在的delta的样式的影响？ 同样，删除时使用deleteText、insertText方法，结果也都不理想。 *** 经过maxkiicc大佬的帮助，我已经解决了 1. 需要实现在vuequilleditor中粘贴文本时，将粘贴的富文本转换文纯文本，并插入到光标所在位置。 2. 插入文本后，需要修改光标位置到插入文本的后面 3. 即使当前光标所在的位置（选中的文本）带有css样式，粘贴后的文本也不能带有样式。 尚未解决的问题为： 2. 如果光标选中了部分内容，需要将选中的内容替换为粘贴文本。 问题描述： 如果用光标选中一部分内容，然后再粘贴，会发现粘贴的内容被删除了光标选中文本长度的内容。 比如： 当前内容为：1234 光标选中文本：23 要粘贴的内容：index 得到的结果：1dex4 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' }, }, mounted () { var quill = this.$refs.myQuillEditor.quill quill.root.addEventListener('paste', function (e) { e.preventDefault() const clipboardData = e.clipboardData || window.clipboardData const pastedText = clipboardData.getData('text/plain') requestAnimationFrame(() => { const pasteLength = pastedText.length const index = quill.selection.savedRange.index const length = quill.selection.savedRange.length // retain delete的index不能等于0 if (index === 0) { if (length !== 0) { quill.updateContents([ { insert: pastedText, }, { delete: length } ]) } else { quill.updateContents([ { insert: pastedText, }, ]) } } else { if (length !== 0) { quill.updateContents([ { retain: index, }, { insert: pastedText, }, { delete: length } ]) } else { quill.updateContents([ { retain: index, }, { insert: pastedText, }, ]) } } // 挪动光标到复制文本后 setTimeout(() => { quill.setSelection(index + pasteLength, 0) }, 0) }) }) } })