最近做專案的時候有一個釋出新聞的需求，新聞編輯的時候要求能釋出帶格式的文字內容和能展示支援圖片。
由於專案是用 Vue 開發的，所以找編輯器的時候選了 vue-quill-editor 。編輯器長如下的樣子：

現在的問題

但是這個編輯器會把插入的圖片會轉成 base64 位的編碼，使得編輯器內容儲存進資料庫的時候會超出限制長度，從而報錯。

從問題來源著手

首先要明白導致這個問題的原因是 vue-quill-editor 編輯器預設把上傳的圖片給轉成 base64 編碼，那是不是有這麼一個配置引數可以設定上傳後圖片的格式呢？經過一番文件的查詢，貌似是沒有。但是提供了一個 handlers 可以自定義圖片上傳的方式，那就從這裡下文章。大概意思是點選這個圖片按鈕的時候，會出發一個回撥，可以在回撥裡觸發自己的檔案上傳開關。這裡我用的檔案上傳是 element-ui 的 el-upload。

安裝vue-quill-editor

npm install vue-quill-editor --save

配置vue-quill-editor

配置 html

<quill-editor
  v-model="ruleForm.content"
  ref="myQuillEditor"
  :options="editorOption"
  class="ql-editor"
  :class="operationType.includes('check') ? 'disabled' : ''"
  :disabled="operationType.includes('check')"
  >
</quill-editor>

匯入vue-quill-editor 且設定components：

import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  }
}

設定options:

editorOption:{
  modules: {
    toolbar: {
      container: [
        ['bold','italic','underline','strike'],['blockquote','code-block'],[{ 'list': 'ordered' },{ 'list': 'bullet' }],[{ 'script': 'sub' },{ 'script': 'super' }],[{ 'indent': '-1' },{ 'indent': '+1' }],[{ 'size': ['small',false,'large','huge'] }],[{ 'header': [1,2,3,4,5,6,false] }],[{ 'color': [] },{ 'background': [] }],[{ 'align': [] }],['clean'],['link','image']
      ],handlers: {
        image: function(value) {
          if (value) {
            // 觸發element-ui的檔案上傳
            document.querySelector(".avatar-uploader input").click();
          } else {
            this.quill.format("image",false);
          }
        },}
    }
  },placeholder: '請輸入',},

引入相關style：

<style lang="scss">
 @import '~quill/dist/quill.core.css';
 @import '~quill/dist/quill.snow.css';
 @import '~quill/dist/quill.bubble.css';
</style>

配置el-upload

template：

<el-upload
  ref="quillUploader"
  class="avatar-uploader"
  :action="serverUrl"
  :show-file-list="false"
  :auto-upload="false"
  :on-change="onChangeQuill"
  :before-upload="beforeUpload"
  :limit="20"
  :multiple="true"
  :accept="acceptFile">
</el-upload>

onChange的時候執行檔案上傳，這裡的檔案上傳用的是騰訊的物件儲存服務，cosUtils封裝了一些物件儲存的一些工具方法，你們可以自行替換成自己後端的上傳介面。下面這段程式碼的大概意思是檔案上傳到物件儲存伺服器成功之後，拿到具體的圖片地址，插入到編輯器游標所在的位置，這個時候圖片就顯示出來了。

onChangeQuill(file,fileList) { 
  let fileName = file.uid + file.name
  cosUtils.putObject(fileName,file.raw,'operate/',(err,data) => { // 新聞圖片存到operate/目錄下
    console.log(err || data)
    if (!err) { 
      let quill = this.$refs.myQuillEditor.quill
      let length = quill.getSelection().index
      // 圖片上傳到物件儲存後的具體地址
      let imgSrc = `https://xxxxxxx.cos.ap-shanghai.myqcloud.com/operate/${fileName}`
      quill.insertEmbed(length,"image",imgSrc)
      // 調整游標到最後
      quill.setSelection(length + 1)
    }
  })
}

到此這篇關於vue-quill-editor插入圖片路徑太長問題解決方法的文章就介紹到這了,更多相關vue-quill-editor 圖片路徑 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！