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

2019年8月25日 316次阅读 来源: lihualong

我们一般都邑运用富文本编辑器在背景编辑内容，开辟vue固然也少不了，我们经由过程vue官网的链接能够找到一些资本，或许去github上查找一些开源的编辑器。
我运用的是vue-quill-editor，它的界面很简约，功用也满足日常平凡的编辑须要，不过于痴肥，然则它默许的图片上传是运用Data URL体式格局保存到了内容里，这不是我想要的，我置信大部分人也不想如许去保存图片，还好quill供应了怎样去自定义按钮事宜的demo(03-example.vue)，那末我们就能够本身去完成图片的保存体式格局了。

先看看效果，能够支撑直接上传文件和裁切图片

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

工具栏处置惩罚

先建立一个组件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文件

《vue-quill-editor自定义图片上传》
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就完成了，跟多的仔细的处置惩罚就由您发挥了。

    原文作者：lihualong
    原文地址: https://segmentfault.com/a/1190000009877910
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞