最近在做一个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. MySQL事务实现原理

    MySQL事务隔离级别的实现原理 知识储备 只有InnoDB支持事务,所以这里说的事务隔离级别是指InnoDB下的事务隔离级别 隔离级别 读未提交:一个事务可以读取到另一个事务未提交的修改.这会带来脏 ...

  2. 手动修改user-agent

    1. 在浏览器地址栏输入 about:config.弹出对话框:

  3. 在Xcode中手动添加pch文件

    在Xcode中手动添加pch文件: 一: 在工程中新建.pch文件,pch文件名通常用工程名字命名: 二: 在Targets->build Settings->Prefix Header ...

  4. java.lang.NumberFormatException: For input string: "1" at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65) at java.lang.Integer.parseInt(Integer.java:580) at java.lang

    java.lang.NumberFormatException: For input string: "1" at java.lang.NumberFormatException ...

  5. mybatis mapper调用mysql存储过程

    mybatis版本:3.4.4 存储过程 1.mapper.xml文件中配置相关的sql语句. <select id="callTest" statementType=&qu ...

  6. 编译器错误消息: CS0012: 类型“System.Object”在未被引用的程序集中定义。必须添加对程序集“System.Runtime, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a”的引用。

    编译器错误消息: CS0012: 类型“System.Object”在未被引用的程序集中定义.必须添加对程序集“System.Runtime, Version=4.0.0.0, Culture=neu ...

  7. XAML语法及标记扩展、附加属性、特定的字符和空白

    1.对象元素语法 使用开闭标签将对象定义一个XML元素,这种语法与其他标记语言如HTML的元素语法非常相似,在以左右尖括号保卫要设置的类或结构的类型名称.对象元素可以声明0个或多个属性,以一个或多个空 ...

  8. Javascript基础系列之(五)条件语句(逻辑操作符)

    javascript和其它语言一样,逻辑运算主要包括 与运算&& ,或运算 II  和非运算 ! 与运算(&&)是指两个条件都为true时,整个表达式为true,或运算 ...

  9. Spring 中任意位置获取 session 和 request

    在web.xml中添加监听: <listener> <listener-class>org.springframework.web.context.ContextLoaderL ...

  10. 互联网轻量级框架SSM-查缺补漏第八天(MyBatis插件plugin使用及原理)

    简言:今天进行第八天的记录(只是写了八天).有的时候看的多,有的时候看的少,看的少的时候就攒几天一起写了.而今天这个插件我昨天写了一下午,下班没写完就回去了,今天把尾收了,再加上一个过程图方便下面原理 ...