vue-quill富文本编辑器插入img标签时自定义属性

最近被quill.js这个富文本编辑器折磨了好几天，最终也算是完成需求。现描述一下这次遇到的需求时什么：产品说需要在富文本编辑器加入一个图文混排的功能（图片需要支持缩放、并且图片与文字需要居中对齐）。之前只是文字并没有上传图片的功能。在拿到需求之后觉得很简单，就是在富文本编辑器新增一个图片上传功能。之后在开发的过程中还是遇到了好多问题。下面详细的给大家讲解一下。希望可以帮助到大家。
1、首先需要解决的事图片上传以及缩放功能。实现步骤。

      editorOption: {theme: "snow", // 主题placeholder: this.isStem? "由于组卷时自动生成题号，建议录入题干时不带题号": "",modules: {imageDrop: true, // 拖动加载图片组件。imageResize: {//调整大小组件。displayStyles: {backgroundColor: "black",border: "none",color: "white"},modules: ["Resize", "DisplaySize", "Toolbar"]},toolbar: {container: [["bold", "italic", "underline", "strike"], // toggled buttons[{ script: "sub" }, { script: "super" }],[{ align: [] }],["image"]],handlers: {image: value => {if (value) {this.$refs[this.uploadId].$refs["commonUpload"].$refs["uploadFile"].$children[0].$refs.input.click();} else {this.quill.format("image", false);}}}}}}

这个object是富文本配置的对象，在toolbar.container加入[’image‘]即可在工具栏中调出上传图片的按钮。如果使用默认的上传图片最终会返回一个base64的特别长的字符串，不利于后端存储。所以这时我们都应该用本公司的上传接口，获取其返回的图片访问地址，然后在插入到富文本中即可实现。

在handlers定义一个image的key，其对应的函数就是我们点击工具栏之后响应的函数，这在里我让他点击了隐藏的上传按钮，在上传成功的回调函数里我们需要做的是把图片的url插入到富文本中，代码如下：

 // 获取光标所在位置let length = this.editor.selection.savedRange.index; //获取光标位置if (length == 0) {length = this.editor.getLength();}// 插入图片，res为服务器返回的图片链接地址this.editor.insertEmbed(length,"image","https://kz-teaching-test.oss-cn-beijing.aliyuncs.com/" + e[0].url);// 调整光标到最后this.editor.setSelection(length + 1);

这里的this.editor 就是quill对象，可以根据自己定义的更换名称。如果页面中存在多个富文本那么就需要根据唯一标识来区分不然会作用域混乱。

2、如何实现图片的缩放：

import { ImageDrop } from "quill-image-drop-module";
import ImageResize from "quill-image-resize-module";
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize);
// 下方内容放到 options.modules下即可，上方有整体的options的定义
imageDrop: true, // 拖动加载图片组件。imageResize: {//调整大小组件。displayStyles: {backgroundColor: "black",border: "none",color: "white"},modules: ["Resize", "DisplaySize", "Toolbar"]},

如果是vue-cli3以后的版本，在引入这些之后我们还需要在vue.config.js引入

  plugins: [new webpack.ProvidePlugin({// 在这儿添加下面两行'window.Quill': 'quill/dist/quill.js','Quill': 'quill/dist/quill.js'})]

3、在解决了图片上传之后，还有一个是图片和文字居中显示的功能。默认的文字和图片在一起的话，他们是图片和文字的底部相对齐。这里设计到一个属性那就是 vertical-align。我们看一下默认的情况以及更改这个属性之后的情况：

默认是底部对齐，我们更改为 vertical-align：middle.之后

我们可以发现他是居中对齐了。但是如何才能在插入标签的给img标签加入这个css属性呢，经过研究发现这个insertEmebd这个api不支持添加属性，如果需要的话需要自定义一下，把这个类扩展一下代码如下：


var BlockEmbed = Quill.import('blots/block/embed')class ImageBlot extends BlockEmbed {static create(value) {let node = super.create();node.setAttribute('src', value.url);node.setAttribute('controls', value.controls)node.setAttribute('width', value.width)node.setAttribute('height', value.height)return node;}static value(node) {return{url:node.getAttribute('src'),controls:node.getAttribute('controls'),width: node.getAttribute('width'),height:node.getAttribute('height')}}}ImageBlot.blotName = 'image';ImageBlot.tagName = 'img';// 使用方式quill.insertEmbed(range.index, 'image',{     url:url,heigth:'',widht:''  })                                                                                                  // 这样我们就可以添加富文本的时候给他定义属性了，但是他会换行，这个没有解决，解决了的小伙伴可以告诉我一下。

参考链接：
quill.js.com
https://quilljs.com/guides/cloning-medium-with-parchment/#dividers

vue-quill富文本编辑器插入img标签时自定义属性相关推荐

vue quill富文本编辑器上传图片遇到的坑
在使用quill富文本编辑器上传图片的时候,很多地方都是成功的,但是唯有一处,上传图片总是失败,由此后端的朋友就说可以html标签转换成JSON字符串上传上去,展示的时候在转换回来,即可解决问题. 由 ...
quill 富文本编辑器自定义格式化
quilljs 现在富文本编辑器轮子太多了,Github 上随便搜一下就有一堆,我需要实现的功能很简单,所以就佛系地选了 quilljs,quilljs 是一个轻量级的富文本编辑器. 链接: 官网:q ...
Quill 富文本编辑器二次封装
Quill 富文本编辑器二次封装 Quill 是一个很流行的富文本编辑器,github 上 star 大约 21k.但是很少项目中使用时直接使用它,都要对其进行二次封装,你作为一个页面仔是挡不住有想法 ...
quill富文本编辑器——修改默认图片、视频上传功能
quill富文本编辑器默认的图片上传是将图片地址转换为base64格式,可能会导致字段过长:默认的视频上传是插入iframe标签,与需要的video标签不符合图片上传初始化编辑器时重写image上 ...
使用vue的富文本编辑器操作
使用vue的富文本编辑器操作 vue的富文本编辑器使用以及多图片文件上传与回显一. vue-quill-edit 1. 安装vue的富文本 cd 当前的vue项目路径 npm install qui ...
vue项目+富文本编辑器ueditor - 资源篇
资源地址: git源码 · 解说地址 git源码:源码下载地址 · [基于 vue-cli 2.x 的完整 DEMO] ueditor插件Demo演示地址说明: 支持 vue-cli 2.x 支持 ...
vue+summernote富文本编辑器
vue+summernote富文本编辑器最近项目中有新增编辑报告的需求需使用富文本编辑器,在网上找了几篇相关博客,于是选择了summernote ,summernote是一款轻量级的富文本编辑器,比 ...
UEditor +数学公式+ Vue+ Kityformula 富文本编辑器嵌入数学公式的实现
UEditor +数学公式+ Vue + Kityformula 富文本编辑器嵌入数学公式的实现首先展示一下代码实现后的效果: 现在我们开始写代码第一步:我们需要去下载Ueditor官方的包:Ue ...
vue中使用quill富文本编辑器
因为公司的需求,对比了线在很火的几款富文本编辑器,最终选定了quill,他够轻量,拓展性也比较高,除了文档是英文的阅读不方便之外,都很适合公司项目.故整理出来,也方便以后使用. 在网上找了一个中文文档 ...

vue-quill富文本编辑器插入img标签时自定义属性

vue-quill富文本编辑器插入img标签时自定义属性相关推荐

最新文章

热门文章