vue-quill-editor自定义图片上传

12

我们通常都会使用富文本编辑器在后台编辑内容,开发vue当然也少不了,我们通过vue官网的链接可以找到一些资源,或者去github上查找一些开源的编辑器。
我使用的是vue-quill-editor,它的界面很简洁,功能也满足平时的编辑需要,不过于臃肿,但是它默认的图片上传是使用Data URL方式保存到了内容里,这不是我想要的,我相信大部分人也不想这样去保存图片,还好quill提供了如何去自定义按钮事件的demo(03-example.vue),那么我们就可以自己去实现图片的保存方式了。

先看看效果,可以支持直接上传文件和裁切图片

图片描述
图片描述
图片描述

工具栏处理

先创建一个组件Editor.vue,引入vue-quill-editor,我们要做的就是重新定义它的操作按钮,也就是使用slot="toolbar"这个插槽,先贴出quill案例的关键代码

<quill-editor v-model="content"
                      :options="editorOption"
                      @blur="onEditorBlur($event)"
                      @focus="onEditorFocus($event)"
                      @ready="onEditorReady($event)">
         <div id="toolbar" slot="toolbar">
           <button class="ql-bold">Bold</button>
           <button class="ql-italic">Italic</button>
         </div>
</quill-editor>

我们可以看到插槽内我们放了两个按钮分别是加粗和倾斜,quill会根据这些按钮的class属性绑定样式和操作,也就是说如果我们不用它的样式,自己写样式,自己绑定事件,就可以去处理自己的逻辑了,那我们要保留quill之前的所有功能只修改图片上传应该如何配置呢?原有的布局样式都保留,只去掉图片样式并单独加事件

<quilleditor v-model="content"
                 ref="myTextEditor"
                 :options="editorOption"
                 @change="onChange"
                 >
      <div id="toolbar" slot="toolbar">
        <span class="ql-formats"><button type="button" class="ql-bold"></button></span>
        <span class="ql-formats"><button type="button" class="ql-italic"></button></span>
        <span class="ql-formats"><button type="button" class="ql-underline"></button></span>
        <span class="ql-formats"><button type="button" class="ql-strike"></button></span>
        <span class="ql-formats"><button type="button" class="ql-blockquote"></button></span>
        <span class="ql-formats"><button type="button" class="ql-code-block"></button></span>
        <span class="ql-formats"><button type="button" class="ql-header" value="1"></button></span>
        <span class="ql-formats"><button type="button" class="ql-header" value="2"></button></span>
        <span class="ql-formats"><button type="button" class="ql-list" value="ordered"></button></span>
        <span class="ql-formats"><button type="button" class="ql-list" value="bullet"></button></span>
        <span class="ql-formats"><button type="button" class="ql-script" value="sub"></button></span>
        <span class="ql-formats"><button type="button" class="ql-script" value="super"></button></span>
        <span class="ql-formats"><button type="button" class="ql-indent" value="-1"></button></span>
        <span class="ql-formats"><button type="button" class="ql-indent" value="+1"></button></span>
        <span class="ql-formats"> <button type="button" class="ql-direction" value="rtl"></button></span>

      <span class="ql-formats"><select class="ql-size">
        <option value="small"></option>
        <option selected></option>
        <option value="large"></option>
        <option value="huge"></option>
      </select></span>
      <span class="ql-formats"><select class="ql-header" >
        <option value="1"></option>
        <option value="2"></option>
        <option value="3"></option>
        <option value="4"></option>
        <option value="5"></option>
        <option value="6"></option>
        <option selected="selected"></option>
      </select></span>
      <span class="ql-formats"><select class="ql-color">
        <option selected="selected"></option>
        <option value="#e60000"></option>
        <option value="#ff9900"></option>
        <option value="#ffff00"></option>
        <option value="#008a00"></option>
        <option value="#0066cc"></option>
        <option value="#9933ff"></option>
        <option value="#ffffff"></option>
        <option value="#facccc"></option>
        <option value="#ffebcc"></option>
        <option value="#ffffcc"></option>
        <option value="#cce8cc"></option>
        <option value="#cce0f5"></option>
        <option value="#ebd6ff"></option>
        <option value="#bbbbbb"></option>
        <option value="#f06666"></option>
        <option value="#ffc266"></option>
        <option value="#ffff66"></option>
        <option value="#66b966"></option>
        <option value="#66a3e0"></option>
        <option value="#c285ff"></option>
        <option value="#888888"></option>
        <option value="#a10000"></option>
        <option value="#b26b00"></option>
        <option value="#b2b200"></option>
        <option value="#006100"></option>
        <option value="#0047b2"></option>
        <option value="#6b24b2"></option>
        <option value="#444444"></option>
        <option value="#5c0000"></option>
        <option value="#663d00"></option>
        <option value="#666600"></option>
        <option value="#003700"></option>
        <option value="#002966"></option>
        <option value="#3d1466"></option>
      </select></span>
     <span class="ql-formats"> <select class="ql-background">
        <option value="#000000"></option>
        <option value="#e60000"></option>
        <option value="#ff9900"></option>
        <option value="#ffff00"></option>
        <option value="#008a00"></option>
        <option value="#0066cc"></option>
        <option value="#9933ff"></option>
        <option selected="selected"></option>
        <option value="#facccc"></option>
        <option value="#ffebcc"></option>
        <option value="#ffffcc"></option>
        <option value="#cce8cc"></option>
        <option value="#cce0f5"></option>
        <option value="#ebd6ff"></option>
        <option value="#bbbbbb"></option>
        <option value="#f06666"></option>
        <option value="#ffc266"></option>
        <option value="#ffff66"></option>
        <option value="#66b966"></option>
        <option value="#66a3e0"></option>
        <option value="#c285ff"></option>
        <option value="#888888"></option>
        <option value="#a10000"></option>
        <option value="#b26b00"></option>
        <option value="#b2b200"></option>
        <option value="#006100"></option>
        <option value="#0047b2"></option>
        <option value="#6b24b2"></option>
        <option value="#444444"></option>
        <option value="#5c0000"></option>
        <option value="#663d00"></option>
        <option value="#666600"></option>
        <option value="#003700"></option>
        <option value="#002966"></option>
        <option value="#3d1466"></option>
      </select></span>
      <span class="ql-formats"><select class="ql-font">
        <option selected="selected"></option>
        <option value="serif"></option>
        <option value="monospace"></option>
      </select></span>
      <span class="ql-formats">
        <select class="ql-align">
        <option selected="selected"></option>
        <option value="center"></option>
        <option value="right"></option>
        <option value="justify"></option>
      </select>
      </span>
        <span class="ql-formats"><button type="button" class="ql-clean"></button></span>
        <span class="ql-formats"><button type="button" class="ql-link"></button></span>
        <!--图片按钮点击事件-->
      <span class="ql-formats"><button type="button" @click="imgClick">
        <svg viewBox="0 0 18 18"> <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect> <circle class="ql-fill" cx="6" cy="7" r="1"></circle> <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline> </svg>
      </button></span>
        <span class="ql-formats"><button type="button" class="ql-video"></button></span>

      </div>
    </quilleditor>

逻辑处理

布局完成了,接下来就是逻辑处理了,我们使用cli构建项目,创建两个vue文件

图片描述
Quilleditor.vue是我们对vue-quill-editor的封装
CropUpload.vue是我们对vue-image-crop-upload的封装

具体代码请访问https://github.com/lihualong/...

总结

  1. 我们是在quill的基础上再封装了一个插件,基本的配置按照quill就好了

  2. 定义props让父组件传值,图片上传的url和file控件的name名称

  3. 处理图片点击的逻辑imgClick方法,判断图片是否裁切,选择不同的处理方式,

  4. 图片处理成功后,并把结果插入quill编辑器,

  5. 我们在父组件调用时都会采用v-model双向绑定,当父组件绑定值时我们使用watch给quill赋值,quill编辑后调用onchange 事件使用this.$emit('input', this.content)给父组件传值

至此我们的自定义Editor就完成了,跟多的细致的处理就由您发挥了。

你可能感兴趣的

27 条评论
tl624612147 · 2017年06月23日

你好,关于vue quill editor上传文件自定义的问题我想咨询你下,不知道您有时间么

回复

0

可以,相互学习

lihualong 作者 · 2017年06月23日
0

请问你用form表单提交还是转base64,如果用form表单提交,存在跨域问题么

tl624612147 · 2017年07月20日
0

demo里的代码使用xhr提交,这肯定是存在跨域的,我们能用到这种编辑器,基本上都是pc端,那我们的代码通常都会部署在服务器上,页面和接口基本上都是同一个域,也就不用考虑跨域了。如果不在,那就和后台上来跨域解决方案吧

lihualong 作者 · 2017年07月23日
疯狂的马桶刷 · 2017年07月07日

你好,按照你的方法,点击按钮选择图片后出现这个错误
test.vue?e069:95 Uncaught TypeError: Cannot read property 'quill' of undefined

at VueComponent.editor (eval at <anonymous> (app.js:6732), <anonymous>:100:37)
at Watcher.get (eval at <anonymous> (app.js:729), <anonymous>:2779:25)
at Watcher.evaluate (eval at <anonymous> (app.js:729), <anonymous>:2879:21)
at VueComponent.computedGetter [as editor] (eval at <anonymous> (app.js:729), <anonymous>:3133:17)
at VueComponent.onFileChange (eval at <anonymous> (app.js:6732), <anonymous>:67:11)
at HTMLInputElement.boundFn (eval at <anonymous> (app.js:729), <anonymous>:165:14)

回复

0

不好意思,是我代码问题

疯狂的马桶刷 · 2017年07月07日
byte邱 · 2017年07月12日

你好,上传图片可以不转成base64吗?有相应配置吗

回复

0

现在就没有转base64,直接使用的是formdata提交

lihualong 作者 · 2017年07月15日
0

可以使用插件vue-quill-editor-upload: https://github.com/NextBoy/vu...

nextBoy · 1月14日
draem · 2017年07月28日

你好! 为什么上传图片的接口一直报错(就是App.vue文件里的uploadUrl)。 开发的话要用什么接口?

POST http://localhost:8090/ 404 (Not Found)

回复

0

可以处理content-type是multiple/form-data的post请求,另外服务端要处理跨域

lihualong 作者 · 2017年07月28日
0

出现一个问题啊。 为什么引入到项目,自定义完全失效了。 imgClick事件完全触发不了,自定义完全没实现。 好头疼。

draem · 2017年08月02日
Joe_Somebody · 2017年08月30日

为什么只有裁剪照片的时候才能正确上传图片, 否则报错 500

回复

0

@Joe_Somebody 500是后台服务器的代码错误,看不到具体的错误信息,不好判断。可能是图片内容没有上传,后台就进行处理了,你可以加前端判断,没有数据不请求接口

lihualong 作者 · 2017年08月30日
0

通过 var input = document.createElement('input');生成的input 元素,在click()事件触发后,onchange方法获取不了图片的信息

seavenoo · 2017年12月14日
0

目前没有解决,请问你怎么解决的

seavenoo · 2017年12月14日
zhoulubbg · 2017年09月26日

如果一个页面引入多个该组件,只有一个组件的样式是正常的。其实组件的样式都是乱的。debug看了一些样式,是因为其他组件没有加入svg标签

回复

谭陶亮 · 2017年10月20日

就图片上传的代码需要写吗?请问有什么要注意的 就就是App.vue文件里的uploadUrl, uploadUrl 里面的代码

回复

HaleShen · 2017年11月10日

按照你的思路,封装好quill组件,在一个页面中多次引用封装好的组件我出现cannot read property 'innerHTML' of null的错,知道是怎么回事吗?

回复

狗贱 · 2017年11月26日

请问一 如何限制编辑器输入字符数 比如超过时无法输入 但可以删除字符?谢谢

回复

seavenoo · 2017年12月14日

服务器接收不了图片上传信息的问题,在GitHub上也说明https://github.com/lihualong/...

回复

nextBoy · 1月13日

可以使用这个辅助插件 vue-quill-editor-upload
地址: https://github.com/NextBoy/vu...

回复

何忱 · 3月16日

请问可以上传本地视频吗

回复

刘耿亮 · 6月20日

你好,请问怎么处理
POST http://localhost:8080/server/upload 404 (Not Found)

回复

Hackerofshi · 6月27日

大神问个问题,一个页面多次应用这个富文本框出现的bug您遇到过吗

回复

Hackerofshi · 6月27日

Cannot read property 'innerHTML' of null.我在github上面看到了这个问题但是我没有办法解决https://github.com/surmon-chi...

回复

载入中...