1.下載并引入
npm install --save?vue-quill-editor
import { quillEditor, Quill } from "vue-quill-editor"
import {ImageExtend, QuillWatch } from "quill-image-extend-module"
Quill.register('modules/ImageExtend',?ImageExtend)
2.寫入標(biāo)簽
<quill-editor class="myQuillEditor" v-model="medicalDocs.content" ref="myQuillEditor" :options="editorOption"></quill-editor>
3.js
components: { quillEditor }
data(){
? ? return{
? ??????medicalDocs: {content: ""},
? ??????editorOption: {
? ? ? ? ? ? ? ? placeholder: "請在這里輸入",
? ? ? ? ? ? ? ? modules: {
? ? ? ? ? ? ? ? ? ? ImageExtend: {
? ? ? ? ? ? ? ? ? ? ? ? // 如果不作設(shè)置括饶，即{} ?則依然開啟復(fù)制粘貼功能且以base64插入
? ? ? ? ? ? ? ? ? ? ? ? name: "file", // 圖片參數(shù)名
? ? ? ? ? ? ? ? ? ? ? ? size: 3, // 可選參數(shù) 圖片大小泼各，單位為M，1M = 1024kb
? ? ? ? ? ? ? ? ? ? ? ? action: this.api.uploadFile, // 服務(wù)器地址, 如果action為空南誊，則采用base64插入圖片
? ? ? ? ? ? ? ? ? ? ? ? // response 為一個函數(shù)用來獲取服務(wù)器返回的具體圖片地址
? ? ? ? ? ? ? ? ? ? ? ? // 例如服務(wù)器返回{code: 200; data:{ url: 'baidu.com'}}
? ? ? ? ? ? ? ? ? ? ? ? // 則 return res.data.url
? ? ? ? ? ? ? ? ? ? ? ? response: res => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? // console.log('res=======', res);
? ? ? ? ? ? ? ? ? ? ? ? ? ? return res.content.url;
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? headers: xhr => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 上傳圖片請求需要攜帶token的 在xhr.setRequestHeader中設(shè)置
? ? ? ? ? ? ? ? ? ? ? ? ? ? xhr.setRequestHeader(
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "Authorization", 'Bearer ' + localStorage.getItem('token')
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // this.getCookie("username")
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // ? this.getCookie("username").token_type +
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // ? ? this.getCookie("username").access_token
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // : "Basic emh4eTp6aHh5"
? ? ? ? ? ? ? ? ? ? ? ? ? ? );
? ? ? ? ? ? ? ? ? ? ? ? }, // 可選參數(shù) 設(shè)置請求頭部
? ? ? ? ? ? ? ? ? ? ? ? sizeError: () => {}, // 圖片超過大小的回調(diào)
? ? ? ? ? ? ? ? ? ? ? ? start: () => {}, // 可選參數(shù) 自定義開始上傳觸發(fā)事件
? ? ? ? ? ? ? ? ? ? ? ? end: () => {}, // 可選參數(shù) 自定義上傳結(jié)束觸發(fā)的事件婆跑，無論成功或者失敗
? ? ? ? ? ? ? ? ? ? ? ? error: () => {}, // 可選參數(shù) 上傳失敗觸發(fā)的事件
? ? ? ? ? ? ? ? ? ? ? ? success: () => {}, // 可選參數(shù) ?上傳成功觸發(fā)的事件
? ? ? ? ? ? ? ? ? ? ? ? change: (xhr, formData) => {
? ? ? ? ? ? ? ? ? ? ? ? // xhr.setRequestHeader('myHeader','myValue')
? ? ? ? ? ? ? ? ? ? ? ? // formData.append('token', 'myToken')
? ? ? ? ? ? ? ? ? ? ? ? } // 可選參數(shù) 每次選擇圖片觸發(fā)喘垂，也可用來設(shè)置頭部惭载，但比headers多了一個參數(shù)，可設(shè)置formData
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? toolbar: {
? ? ? ? ? ? ? ? ? ? ? ? container: [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ['bold', 'italic', 'underline', 'strike'], ? ? //加粗准给，斜體泄朴，下劃線，刪除線
? ? ? ? ? ? ? ? ? ? ? ? ? ? [{'header': 1}, {'header': 2}, {'header': 2}], // 標(biāo)題露氮，鍵值對的形式祖灰；1、2表示字體大小
? ? ? ? ? ? ? ? ? ? ? ? ? ? [{'list': 'ordered'}, {'list': 'bullet'}], ? ? //列表
? ? ? ? ? ? ? ? ? ? ? ? ? ? [{'size': ['small', false, 'large', 'huge']}], // 字體大小
? ? ? ? ? ? ? ? ? ? ? ? ? ? [{'color': []}, {'background': []}], ? ? // 字體顏色畔规，字體背景顏色
? ? ? ? ? ? ? ? ? ? ? ? ? ? ["image"]
? ? ? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? ? ? handlers: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? image: function() {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 劫持原來的圖片點擊按鈕事件
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? QuillWatch.emit(this.quill.id);
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? }
????}
}
