vue-quill-editor自定義圖片上傳

咱們一般都會使用富文本編輯器在後臺編輯內容，開發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就完成了，跟多的細緻的處理就由您發揮了。