踩坑：如何實現富文本編輯quill自定義圖片、視頻、文件等上傳

圖片與視頻上傳

 <el-upload
            ref="uploadBox"
            :action="接口地址"
            :before-upload="checkFileSize" //再往下翻寫了方法
            :auto-upload="true"
            :on-success="uploadSuccess" //再往下翻寫了方法
            :file-list="detailPics"
            :show-file-list="false"
            :name="isImg ? 'img' : 'file'"
            :limit="1"
            :accept="isImg ? 'image/*' : 'video/*'"
            style="display: none;"
          >
            <el-button ref="uploadImgBtn">上傳圖片</el-button>
</el-upload>

工具欄配置：

 container: [
              [
                { header: 1 },
                { header: 2 },
                { font: Font.whitelist },
                {
                  size: Size.whitelist
                }
              ],
              ['bold', 'italic', 'underline', 'strike', 'blockquote'],
              [
                { align: '' },
                { align: 'center' },
                { align: 'right' },
                { align: 'justify' }
              ],
              [{ color: [] }],
              [{ background: [] }],
              [
                { list: 'ordered' },
                { list: 'bullet' },
                { indent: '-1' },
                { indent: '+1' }
              ],
              ['link', 'image', 'video', 'UpLoad', 'clean', 'brush']
            ],

判斷是否上傳成功，成功的話內容會直接插入富文本框內：

uploadSuccess(res, file) {
      if (res.code === 200) {
        this.detailPics = [
          {
            name: file.name,
            url: res.data.url
          }
        ]
        // 獲取光標所在位置
        let length = this.quill.getSelection().index
        // 插入圖片，res爲服務器返回的圖片鏈接地址
        if (this.isImg) {
          this.quill.insertEmbed(length, 'image', res.data.url)
        } else {
          this.quill.insertEmbed(length, 'simpleVideo', {
            url: res.data.url,
            controls: 'controls',
            width: '100%',
            height: '100%'
          })
        }
        // 調整光標到最後
        this.quill.setSelection(length + 1)
      } else {
        this.$message.error('上傳失敗')
      }
    },

上傳前會判斷文件大小，並做了限制：

 checkFileSize(file) {
      if (!this.isImg && file.size > 1024 * 1024 * 50) {
        this.$message.error('上傳視頻大小不能超過50M')
        return false
      }
      if (this.isImg && file.size > 1024 * 1024 * 1) {
        this.$message.error('上傳圖片大小不能超過1M')
        return false
      }
      if (this.isFile && file.size > 1024 * 1024 * 5) {
        this.$message.error('上傳文件大小不能超過5M')
        return false
      }
      return true
    },

文件上傳

   <el-upload
            :action="接口地址"
            :before-upload="checkFileSize"
            :auto-upload="true"
            :on-success="uploadFileSuccess"
            :name="'file'"
            :accept="'file/*'"
            style="display: none;"
          >
            <el-button ref="uploadFileBtn">點擊上傳文件</el-button>
</el-upload>

判斷文件是否上傳成功，成功的話文件內容直接顯示在富文本框內：

 uploadFileSuccess(res) {
      if (res.code === 200) {
        // 獲取光標所在位置
        let length = this.quill.getSelection().index
        // 插入文件，res爲服務器返回的文件鏈接地址

        this.quill.clipboard.dangerouslyPasteHTML(length, res.data.html)
        // 調整光標到最後
        this.quill.setSelection(length + 1)
      } else {
        this.$message.error('文件上傳失敗')
      }
    },

文件上傳的icon樣式，直接使用的Iconfont的svg格式：

'<svg t="1591328712125" class="icon" viewBox="0 0 1157 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3585" width="200" height="200"><path d="M0.089043 541.570553c0-124.378775 82.236843-233.716397 192.152971-266.112728C253.074138 115.12268 403.708182 0 579.929989 0c177.645822 0 324.185824 115.07818 384.973448 275.457825C1078.3351 308.610664 1157.100907 416.524271 1157.100907 541.570553c0 153.971579-119.572726 279.151362-270.918778 279.151363-28.346791 0-53.934553-26.611273-53.934553-56.070575 0-33.820347 25.587762-56.115075 53.934553-56.115076 91.225935 0 163.80618-74.09326 163.80618-166.876711 0-49.618009-21.44922-95.675981-56.649081-125.135283l-9.656599-9.434097a49.173004 49.173004 0 0 0-12.460128-10.057103c-2.759028-3.604537-9.033593-3.604537-12.460127-6.497066h-3.426536c-2.759028-3.560037-6.230064-3.560037-9.033592-6.452567h-3.471036c-2.759028 0-6.230064-3.560037-9.656599-3.560036-2.759028 0-6.230064 0-6.230064-2.89253h-9.033592c-3.471036 0-6.230064 0-9.7011-3.604537h-25.498761c-2.759028-10.813611-6.230064-18.690192-6.230064-29.503802-2.759028 0-2.759028-3.560037-2.759028-6.452566-3.426535-6.497067-3.426535-12.905132-6.230064-19.4467 0-3.560037-3.426535-3.560037-3.426535-7.164573-2.759028-6.497067-6.230064-12.905132-9.656599-19.402199v-6.497067c-2.803529-6.452566-9.078093-12.905132-12.460128-19.446699-53.178045-92.115945-151.390552-154.639086-261.974186-154.639086-113.342662 0-211.466168 62.567642-264.688715 154.639086l-9.033592 19.446699c0 2.180522-1.424015 2.180522-2.091522 4.316544l-1.379514 2.180523-9.701099 19.402199v7.164573l-8.944592 19.4467v6.452566c-3.471036 10.76911-6.942071 18.690192-6.942071 29.459302h-28.30229c-2.759028 3.604537-6.230064 3.604537-8.944592 3.604537h-6.230064c-2.759028 2.180522-4.138542 2.89253-4.89505 2.892529a1.246013 1.246013 0 0 1-2.047021 0c-2.759028 0-6.230064 3.560037-9.033593 3.560037h-6.230064c-3.426535 2.93703-6.230064 2.93703-9.656599 6.497067h-3.426535c-2.759028 2.89253-6.230064 2.89253-9.078093 6.497066h-3.426535c-2.759028 3.560037-6.230064 6.452566-9.701099 10.057103-6.230064 2.848029-8.944592 6.497067-12.415628 9.389597-35.244361 29.503803-53.222546 75.561775-53.222546 125.179783 0 92.783451 72.580244 166.876711 160.379645 166.876711 32.485333 0 56.693581 22.294729 56.693581 56.070575 0 29.503803-24.208248 56.070575-56.693581 56.070575C123.132805 820.721916 0.089043 695.542132 0.089043 541.659554z m362.856721 186.990918c0-16.55417 6.230064-28.791795 12.460128-39.560906l163.761679-186.901917c10.413107-10.813611 24.920256-16.55417 40.806919-16.554169 15.931163 0 28.346791 5.785059 41.474425 16.509669l160.379644 186.990917a55.981574 55.981574 0 0 1-40.762418 94.963974c-15.931163 0-27.679284-8.677589-38.04789-19.446699l-69.109208-78.409804v281.954891c0 33.820347-24.208248 55.403068-53.934553 55.403068-31.105819 0-53.222546-21.582721-53.222546-55.403068V686.197036l-69.064708 78.365304c-10.368606 10.813611-25.543262 19.446699-41.429925 19.446699-28.391291 0-53.311547-25.899266-53.311547-55.403068v-0.0445z" p-id="3586"></path></svg>'

 handlers: {
              image: () => {
                this.isImg = true
                this.$nextTick(() => {
                  this.detailPics = []
                  this.$refs.uploadImgBtn[0].$el.click()
                })
              },
              video: () => {
                this.isImg = false
                this.$nextTick(() => {
                  this.detailPics = []
                  this.$refs.uploadImgBtn[0].$el.click()
                })
              },
              UpLoad: () => {
                this.isFile = false
                this.$nextTick(() => {
                  this.detailPics = []
                  this.$refs.uploadFileBtn[0].$el.click()
                })
              } 
            }
          },