有功夫的兄弟可以看一下我的博客 www.maple.ink

粘贴图片到富文本

直接拖拽图片到富文本，或者从系统中复制图片文件，在富文本中粘贴，都无法将图片放入富文本。前者会直接在浏览器中打开新窗口，后者直接无任何反应。

通过安装 quill-image-extend-module 增强模块使富文本编辑器具备对图片拖拽放入富文本框的能力，但不具备复制粘贴进入富文本的功能。这里可以配合 quill-image-resize-module 模块设置图片的大小。

// 引入图片增强模块
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
// 引入图片控制增强模块
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/ImageResize', ImageResize)export default {data() {return {editorOptions: {modules: {ImageExtend: {loading: true,name: 'img',action: '',headers: (xhr) => {},response: (res) => {return res.info}},ImageResize: {modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]},}}}}
}

注意：此类方法虽然具备将图片显示在富文本框中的功能，但是其原理实际上是获得了图片的file对象，通过FileReader对象将其转化为 base64 格式，放入img的src属性中，所以从理论上来说不具备传输大文件的能力，可能也会存在一定程度上的失真。

粘贴文件到富文本

粘贴文件主要原理就是绑定当前富文本框的粘贴事件，通过粘贴事件获得粘贴进去的 file 对象。

// 引入自定义的格式
import uploadFile from './quillPlus/uploadFile';
uploadFile.blotName = 'uploadFile';
uploadFile.tagName = 'div';
Quill.register(uploadFile);methods: {onEditorFocus() {let quill = this.$refs.editor.quill,self_ = this;// 监听粘贴事件quill.root.addEventListener('paste', (event)=> {// 判断粘贴的是否是图片if(event.clipboardData && event.clipboardData.files && event.clipboardData.files) {// 阻止原生事件event.preventDefault();let cursorIndex = quill.selection.savedRange.index;[].forEach.call(event.clipboardData.files, file => {// 判断当前文件是否为图片if(file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {let reader = new FileReader();reader.readAsDataURL(file);reader.onload = function(e) {quill.insertEmbed(cursorIndex, 'image', e.target.result);}}else {// 注意这里由于 insertEmbed 语句仅能插入富文本中定义好的格式，所以要扩展当前格式quill.insertEmbed(cursorIndex, 'uploadFile', {file: file, fileIndex: self_.fileIndex++});}})}});},}

自定义格式组件

import {Quill} from 'vue-quill-editor';const BlockEmbed = Quill.import('blots/block/embed');
class uploadFile extends BlockEmbed {static create(value) {let node = super.create();// 设置一个class类名控制样式node.setAttribute('class', 'upload-file');// 设置不允许操作node.setAttribute('contentEditable', false);// 设置data-id标示node.setAttribute('data-id', value.fileIndex);node.innerText = value.file.name;return node;}static value(node) {return {dataId: node.getAttribute('data-id')}}
}export default uploadFile;

这种解决方案也可以解决上传图片的问题，尤其是大图片。

注意：上传文件这里存在两个解决方案：

粘贴文件进入富文本则触发上传，通过 HTTP 请求直接调用接口将 file 对象转为 fromData 传递到服务器。服务器接收到文件后返回当前文件在服务器的链接，将链接插入到页面DOM中的属性上。
粘贴文件进入富文本则将当前file对象存入数组中，点击上传按钮的时候通过循环上传服务器。

推荐上传文件使用第一种解决方案，原因是：前端省事儿~

增强粘贴quill-editor相关推荐

现代化富文本编辑器 Quill Editor
介绍近期在弄富文本编辑器相关的内容,其中项目中使用了 Quill Editor(后面简称 Quill).Quill 自称是一个现代化强大的富文本编辑器,它与其它富文本编辑器(例如 UEditor)不 ...
Quill Editor
VUE-QUILL-EDITOR 该文章仅记录学习过程,不展示最终文件源码安装 quill-editor 在对应的目录打开 Terminal 执行以下命令: 安装 editor npm instal ...
quill editor:The given range isn‘t in document
公司网站使用的是 .NET Razor + 渐进式 Vue 的方式编写的. 在一个发帖子的页面 quill 的区域包含在了 Vue 组件中. 在 vue 的 created 函数中获取不到 quill ...
quill富文本编辑器quill粘贴图片上传服务器
强大的富文本编辑器:quill github:32k start++,:https://github.com/quilljs/quill quill粘贴图片上传服务器 <link href=&q ...
现代富文本编辑器Quill的模块化机制
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...
【华为云技术分享】现代富文本编辑器Quill的模块化机制
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...
vue中使用quill富文本编辑器
因为公司的需求,对比了线在很火的几款富文本编辑器,最终选定了quill,他够轻量,拓展性也比较高,除了文档是英文的阅读不方便之外,都很适合公司项目.故整理出来,也方便以后使用. 在网上找了一个中文文档 ...
quill富文本使用
quill 表格功能要 2.0 npm install quill@2.0.0-dev.3 -dev–save 复制粘贴word 里面图片并且 1.0 与 2.0 其set 与获取富文本单词不一 ...
富文本编辑器Quill(二)上传图片与视频
image与video在Quill formats中属于Embeds,要在富文本中插入图片或者视频需要使用insertEmbed api. insertEmbed insertEmbed(index: ...

增强粘贴quill-editor

粘贴图片到富文本

粘贴文件到富文本

增强粘贴quill-editor相关推荐

最新文章

热门文章