vue中使用vue-quill-editor富文本的示例分析

小編給大家分享一下vue中使用vue-quill-editor富文本的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

vue-quill-editor是我們再使用vue框架的時候常用的一個富文本編輯器，在進行富文本編輯的時候，我們往往要插入一些圖片，vue-quill-editor默認的處理方式是直接將圖片轉成base64編碼，這樣的結果是整個富文本的html片段十分冗余，通常來講，每個服務器端接收的post的數據大小都是有限制的，這樣的話有可能導致提交失敗，或者是用戶體驗很差，數據要傳遞很久才全部傳送到服務器。

1.下載Vue-Quill-Editor

npm install vue-quill-editor --save

2.下載quill（Vue-Quill-Editor需要依賴）

npm install quill --save

3.使用

import { quillEditor } from "vue-quill-editor"; //調用編輯器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

本次使用到了富文本的封裝和上傳圖片,因要求使用element-ui框架，我上傳圖片的時候選擇了element-ui的Upload上傳組件將圖片上傳到服務器。再將圖片鏈接插入到富文本中，以達到最優的體驗。

子組件中將改變的值，直接發送給父組件，父組件來完成邏輯處理

<template>
 <div>
  <el-upload      //直接隱藏掉就好了，用功能不用樣式
   v-show="false"
   id="quill-upload"
   action="/api/product/upload.do"
   name="upload_file"
   multiple
   :limit="3"
   list-type="picture"
   :show-file-list="false"
   :before-upload="beforeUpload"
   :on-error="uploadError"
   :on-success="handleExceed">
   <el-button size="small" type="primary" ></el-button>
   <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
  </el-upload>
  <el-row v-loading="uillUpdateImg">
   <quillEditor
    ref="myQuillEditor"
    @change="onEditorChange($event)"
    v-model="value"
    :options="editorOption"/>
  </el-row>
 </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
 name: "richText",
 components:{quillEditor},
 props:['content'],               //父組件傳過來的，將傳過來的渲染到富文本編輯器
 data(){
  return{
   uillUpdateImg:false,            //根據圖片上傳狀態來確定是否顯示loading動畫
   serverUrl:'', //上傳的圖片服務器地址
   value:this.content,             //富文本內容
   editorOption: {               //符文本編輯器的配置
    placeholder: '',
    theme: 'snow',
    modules: {
     toolbar: {
      container: [             // 工具欄配置, 默認是全部
       ['bold'],
       ['italic'],
       ['underline'],
       ['strike'],
       [{'list':'ordered'},{'list': 'bullet' }],
       ['blockquote'], ['code-block'],
       ['link'],
       ['image'],
       [{'list': 'ordered'}, {'list': 'bullet'}],
      ],
      handlers: {
       'image': function (value) {
        if (value) {
         // 給個點擊觸發Element-ui，input框選擇圖片文件
         document.querySelector('#quill-upload input').click()
        } else {
         this.quill.format('image', false);
        }
       }
      }
     }
    }
   }
  }
 },
 methods:{
  onEditorChange({ quill, html, text }) {   //富文本編輯器內容發生改變的時候
   this.value = html
   this.$emit('textChange',html)       //將富文本編輯器輸入的文本發送給父組件，父組件涉及提交添加或者更改
  },
  beforeUpload(){               //上傳圖片之前開啟loading
   this.uillUpdateImg = true
  },
  uploadError(){               //圖片上傳失敗,關閉loading
   this.uillUpdateImg = false
   this.$message.error('圖片插入失敗')
  },
  handleExceed(response, file, fileList){   //圖片添加成功
   let quill = this.$refs.myQuillEditor.quill
   console.log(response)
   if (response.status === 0) {
    let length = quill.getSelection().index;
    // 插入圖片 response.data.url為服務器返回的圖片地址
    quill.insertEmbed(length, 'image', response.data.url)
    // 調整光標到最后
    quill.setSelection(length + 1)
   }else{
    this.$message.error('圖片插入失敗')
   }
   this.fileList = fileList
   this.uillUpdateImg = false
  },
 }
}
</script>
<style scoped>
</style>

配置中的handlers是用來定義自定義程序的，然而我們配置完后會懵逼地發現，整個富文本編輯器的工具欄的圖片上傳等按鈕都不見了 只保留了幾個基本的富文本功能。

這個是因為添加自定義處理程序將覆蓋默認的工具欄和主題行為

因此我們要再自行配置下我們需要的工具欄，所有功能的配置如下，大家可以按需配置，這里看起來一大堆，也不美觀，大家也可以配置一個單獨的config文件引入。

有一點注意的地方，父組件中傳入子組件中的值，子組件里面發生改變以后再傳給父組件。將變量時存放在props屬性中的，我們在調用變量的時候是跟data里面的變量一樣的，都是通過this.變量來調用，這個問題就是說父組件傳入子組件的變量是不能this.變量直接改變的，要在data或者computed屬性里面重新定義一個變量，或者監聽props接受變量的變化。改變data或者computed屬性里面的變量就不會報錯了。

看完了這篇文章，相信你對“vue中使用vue-quill-editor富文本的示例分析”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！