vue-quill-editor上傳內容由於圖片是base64的導致字符太長的問題解決

vue-quill-editor是個較為輕量級富文本框，相較於ueditor，開發更編輯，更加直觀，如果大家伙在需求允許的情況下，還是會比較建議使用vue-quill-editor

vue-quill-editor的使用方法在這邊就不多說了，大家網上查下，一抓一大把

但是在使用vue-quill-editor有一個致命的問題，vue-quill-editor默認插入圖片是直接將圖片轉為base64再放入內容中，如果圖片比較大的話，富文本的內容就會很大，即使圖片不大，只要圖片較為多，篇幅較長，富文本的內容也是異常的大的，

這就會給大家帶來一些煩惱，我們可能更希望在提交富文本的內容的時候圖片只是以圖片地址提交，那這樣一來我們要怎么去處理呢，接下來大家可以來理一理

還是老思路，既然我們可以希望不是直接將圖片轉成base64，那么我們可以采用選擇完圖片，即將圖片上傳服務器，服務器返回相應的圖片鏈接，前端將圖片鏈接插入到富文本的指定光標上即可，這樣一來就可以實現我們的想要的效果了

首先，新建富文本組件QuillEditor.vue，利用iview的上傳組件來上傳選擇完的圖片（當然，其他的上傳組件也是ok的）

    <Upload
        id="iviewUp"
          ref="upload"
          :show-upload-list="false"
          :on-success="handleSingleSuccess"
          :format="['jpg','jpeg','png']"
          :max-size="2048"
          :headers="header"
          :on-format-error="handleFormatError"
          :before-upload="handleBeforeUpload()"
          type="drag"
          :action="serverUrl"
          style="display: none;width:0">
          <div style="width: 0">
              <Icon type="ios-camera" size="50"></Icon>
          </div>
      </Upload>
      <!--<Row>-->
        <quill-editor 
          v-model="detailContent" 
          ref="myQuillEditor" 
          :options="editorOption" 
          @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
          @change="onEditorChange($event)">
        </quill-editor>
      <!--</Row>-->

看到上面的代碼有的的就會有疑問了，那上傳好的圖片要怎么插到富文本的指定光標里面呢，別慌，面包會有的，往下看，

    handleSingleSuccess (res, file) {
      // res為圖片服務器返回的數據
      // 獲取富文本組件實例
      let vm = this
      let quill = this.$refs.myQuillEditor.quill
      console.log('res---', vm.$refs.myQuillEditor.quill.getSelection())
      // 如果上傳成功
      if (res.res_code === '1') {
          // 獲取光標所在位置
          let length = quill.getSelection().index;
          // 插入圖片  res.info為服務器返回的圖片地址
          quill.insertEmbed(length, 'image', res.result.url)
          // 調整光標到最后
          quill.setSelection(length + 1)
      } else {
          vm.$Message.error('圖片插入失敗')
      }
      // loading動畫消失
      this.quillUpdateImg = false
    }

通過 this.$refs.myQuillEditor.quill.getSelection().index獲取光標所在位置，將圖片地址放在該位置即可

這樣一來萬事俱備，只欠東風了，這個時候大家會發現，那iview這個上傳組件在頁面上呢，我怎么實現點擊富文本上的上傳圖片的按鈕調用iview的上傳組件的方法呢，

這個時候我們就要用到富文本中的配置屬性editorOption，對editorOption進行圖片上傳的點擊事件進行相應的配置即可，詳情看下面代碼

    editorOption: { // 富文本框配置
          placeholder: '',
          theme: 'snow',  // or 'bubble'
          modules: {
              toolbar: {
                  container: toolbarOptions,  // 工具欄
                  handlers: {
                      'image': function (value) {

 

if (value) {
                              document.querySelector('#iviewUp input').click()
                          } else {
                              this.quill.format('image', false);
                          }
                      }
                  }
              }
          }
      }

 document.querySelector('#iviewUp input') 這個就是相應的dom節點的點擊事件，將其綁在富文本的圖片按鈕點擊事件上
好了，基本上大功告成。還是算比較簡單的，希望可以供大家參考