最近在做一个Vue-Clie小项目,使用到了Vue-Quill-Editor这个基于Vue的富文本编辑器插件。这个插件跟Vue契合良好,使用起来比其他的诸如百度UEditor要方便很多,但是存在一个小问题就是Vue-Quill-Editor对于图片上传的处理,它是把图片转换为Base64格式然后上传到后台服务器的,这样做存在的问题就是当图片达到一定大小时,后台存储会有麻烦,理论上使用MySQL数据库存储的话一个字段长度限制在65535左右,最多也不能超过100K,这对于图片上传来说显然是不够用的,所以就需要改进Vue-Quill-Editor。

改进方法是将图片的处理方式修改,不再转换为Base64格式上传,而是先上传到服务器然后再返回图片的Url,让文本编辑器引用这个Url来显示图片。

如何修改Vue-Quill-Editor的按钮面板以及默认处理函数,参考了这位老哥的文章,文章意思大致就是可以通过在 quill-editor 标签中插入标签,利用slot插槽修改默认面板(注意定义面板的div的id设置为“toolbar”了,根据这个id在配置中要指定面板)。通过插入slot的标签修改默认面板之后,还需要在option中修改配置:

data(){
return {
length: '',
editor: {},
editorOption: { //这个对象用于绑定到options属性
modules: {
// imageImport: true,
// imageResize: {
// displaySize: true
// },
toolbar: '#toolbar',//配置面板!!!
}
},
}
}

这一部分参考了另一位老哥的文章,这位老哥主要是讲解了在修改了面板之后的工作:如何定义处理函数,如何把最终的图片插入到文本编辑器中

这里使用了一个虚拟的file类型的input嵌在一个隐藏的Form表单中上传文件,将其隐藏,通过click()函数触发点击事件。由于需要获取文件上传之后返回来的UUID(通过PHP的uniqid()函数生成),所以不能使用表单上传,必须通过Ajax,这样在成功回调中才可以将图片插入到文本编辑器(如果不这样做,无法保证插入图片之前文件上传已经完成,可能会导致404错误)。但是使用Ajax无法获取form表单的enctype等属性,这样上传到后台之后也会出现错误。解决方案就是使用FormData对象上传,给FormData对象传入form表单DOM就可以了。后台获取文件的方式与表单上传无异。

具体如何将图片插入到编辑器中,参考的是这篇文章

var range = this.$refs.myTextEditor.quillEditor.getSelection();
var length = range.index;
this.$refs.myTextEditor.quillEditor.insertEmbed(length, 'image', imageUrl);

需要修改的是getSelection()函数需要传递一个Boolean类型参数,参数传递为true才能正确获取到range。

Vue-Quill-Editor插件插入图片的改进的更多相关文章

  1. vue quill editor输入文字出现首字母的问题

    当使用vue quill editor输入中文时,第一个中文的汉语拼音第一个字母会显示如图. 解决的办法就是升级vue quill editor js文件的版本,目前的我升级之后ok的版本是 < ...

  2. vue.js插值,插入图片,属性

    <html><head><title>Insert title here</title><script type="text/javas ...

  3. 在Vue项目使用quill-editor带样式编辑器(更改插入图片和视频)

    vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大. 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自 ...

  4. ckeditor 4.2.1_演示 ckeditor 上传&插入图片

    本文内容 FineUI ckeditor fckeditor/ckeditor 演示 ckeditor 4.2.1 上传&插入图片 最近看了一下 FineUI_v3.3.1 控件,对里边的 c ...

  5. Vue富文本编辑器(图片拖拽缩放)

    富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...

  6. MWeb 1.4 新功能介绍一:引入文件夹到 MWeb 中管理,支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览

    之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...

  7. 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

  8. Vue 自定义一个插件的用法、小案例及在项目中的应用

    1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象   MyPlugin.install = function (Vue, options) {   // 1 ...

  9. 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播

    1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...

随机推荐

  1. 数据结构与算法(C++)大纲

    1.栈 栈的核心是LIFO(Last In First Out),即后进先出 出栈和入栈只会对栈顶进行操作,栈底永远为0 1.1概念 栈底(bottom):栈结构的首部 栈顶(top):栈结构的尾部 ...

  2. Java入门系列-22-IO流

    File类的使用 Java程序如何访问文件?通过 java.io.File 类 使用File类需要先创建文件对象 File file=new File(String pathname);,创建时在构造 ...

  3. C# XML相关

    XmlDocument doc = new XmlDocument(); 1.string类型的xml,如何转换成xml类型 doc.LoadXml("需要传入的string类型的xml&q ...

  4. iframe适应屏幕大小,隐藏滚动条,移动端

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  5. SQL语句表处理

    1.create table:创建表,语法: create table 表格名 ( 列名 数据类型, 列名 数据类型, ...... ) 2.constrain:约束,关键词 NOT NULL. UN ...

  6. Javaee的Dao层的抽取

    有时候我们在实现不同功能的时候回看到很多的Dao层的增加.修改.删除.查找都很相似,修改我们将他们提取BaseDao 一.提取前 1. 提取前的LinkDao层: public interface L ...

  7. xcode8 打开的 xib 踩坑

    之前开发都不敢工测试版的开发,一直用正式版的,xcode7.3.1的模糊匹配让我很蛋疼,自定义的类,类名不提示,每次都粘贴复制,8号苹果发布了 xcode8GM 版,迫不及待的从苹果开发者官网下了一个 ...

  8. ExceptionHelper异常工具类

    using System;using System.Collections.Generic;using System.Text; namespace JiaWel.Utilities{ public ...

  9. 学习笔记2_Day09_servlet的细节

    Servlet细节 l  不要在Servlet中创建成员!创建局部变量即可! l  可以创建无状态成员! l  可以创建有状态的成员,但状态必须为只读的! 1 Servlet与线程安全 因为一个类型的 ...

  10. winform多线程调用控件

    对多线程操作控件的理解: 控件不能被非创造他的线程修改.需调用控件.beginvoke,注入UI线程.控件.beginvoke会把操作加入UI线程,阻塞画面响应.不要把耗时的计算放在控件.beginv ...