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的）

 1     <Upload
 2         id="iviewUp"
 3           ref="upload"
 4           :show-upload-list="false"
 5           :on-success="handleSingleSuccess"
 6           :format="['jpg','jpeg','png']"
 7           :max-size="2048"
 8           :headers="header"
 9           :on-format-error="handleFormatError"
10           :before-upload="handleBeforeUpload()"
11           type="drag"
12           :action="serverUrl"
13           style="display: none;width:0">
14           <div style="width: 0">
15               <Icon type="ios-camera" size="50"></Icon>
16           </div>
17       </Upload>
18       <!--<Row>-->
19         <quill-editor 
20           v-model="detailContent" 
21           ref="myQuillEditor" 
22           :options="editorOption" 
23           @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
24           @change="onEditorChange($event)">
25         </quill-editor>
26       <!--</Row>-->

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

 1     handleSingleSuccess (res, file) {
 2       // res爲圖片服務器返回的數據
 3       // 獲取富文本組件實例
 4       let vm = this
 5       let quill = this.$refs.myQuillEditor.quill
 6       console.log('res---', vm.$refs.myQuillEditor.quill.getSelection())
 7       // 若是上傳成功
 8       if (res.res_code === '1') {
 9           // 獲取光標所在位置
10           let length = quill.getSelection().index;
11           // 插入圖片  res.info爲服務器返回的圖片地址
12           quill.insertEmbed(length, 'image', res.result.url)
13           // 調整光標到最後
14           quill.setSelection(length + 1)
15       } else {
16           vm.$Message.error('圖片插入失敗')
17       }
18       // loading動畫消失
19       this.quillUpdateImg = false
20     }

經過 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節點的點擊事件，將其綁在富文本的圖片按鈕點擊事件上好了，基本上大功告成。仍是算比較簡單的，但願能夠供你們參考