Vue項(xiàng)目中quill-editor帶樣式編輯器的使用方法

import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)

<template>
 <div>
 <!-- quill-editor插件標(biāo)簽 分別綁定各個(gè)事件-->
 <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
 @change="onEditorChange($event)">
 </quill-editor>
 <div class="limit">當(dāng)前已輸入 <span>{{nowLength}}</span> 個(gè)字符，您還可以輸入 <span>{{SurplusLength}}</span> 個(gè)字符。</div>
 <!-- 文件上傳input 將它隱藏-->
 <el-upload class="upload-demo" :action="qnLocation" :before-upload='beforeUpload' :data="uploadData" :on-success='upScuccess'
 ref="upload" style="display:none">
 <el-button size="small" type="primary" id="imgInput" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="插入中,請稍候">點(diǎn)擊上傳</el-button>
 </el-upload>
 </el-table>
 </div>
</template>

.quill-editor {
 height: 745px;

 .ql-container {
 height: 680px;
 }
}

.limit {
 height: 30px;
 border: 1px solid #ccc;
 line-height: 30px;
 text-align: right;

 span {
 color: #ee2a7b;
 }
}

.ql-snow .ql-editor img {
 max-width: 480px;
}

.ql-editor .ql-video {
 max-width: 480px;
}

import Vue from 'util/vueExt'
import { Component } from 'vue-property-decorator'
import * as Template from './editor.vue'
import * as Quill from 'quill' // 引入編輯器

const STATICDOMAIN = '//ss.yidejia.com/'
const STATVIDEO = '//flv.yidejia.com/'

@Component({
 mixins: [Template]
})
export default class Editor extends Vue {
 content = '' // 文章內(nèi)容
 editorOption = {} // 編輯器選項(xiàng)
 addRange: any = new Array()
 uploadData = {}
 photoUrl = '' // 上傳圖片地址
 uploadType = '' // 上傳的文件類型（圖片、視頻）
 fullscreenLoading = false

 $refs: {
 myQuillEditor: any,
 imgInput: any
 }

 get nowLength() {
 return this.content.length
 }

 get SurplusLength() { // 計(jì)算屬性 獲得當(dāng)前輸入字符長度
 let num = 10000 - Number(this.content.length)
 if (num > 0) {
 return num
 } else {
 return 0
 }
 }

 // 上傳七牛的actiond地址
 get qnLocation() {
 if (location.protocol === 'http:') {
 return 'http://up-z0.qiniu.com'
 }
 return 'https://up-z0.qbox.me'
 }

 // 圖片上傳前獲得數(shù)據(jù)token數(shù)據(jù)
 qnUpload(file) {
 this.fullscreenLoading = true
 const suffix = file.name.split('.')
 const ext = suffix.splice(suffix.length - 1, 1)[0]
 console.log(this.uploadType)
 if (this.uploadType === 'image') { // 如果是點(diǎn)擊插入圖片
 return this.api.getQNToken().then(res => {
 this.uploadData = {
 key: `image/${suffix.join('.')}_${new Date().getTime()}.${ext}`,
 token: res
 }
 })
 } else if (this.uploadType === 'video') { // 如果是點(diǎn)擊插入視頻
 return this.api.getVideoQNToken().then(res => {
 this.uploadData = {
 key: `video/${suffix.join('.')}_${new Date().getTime()}.${ext}`,
 token: res
 }
 })
 }
 }

 // 圖片上傳之前調(diào)取的函數(shù)
 beforeUpload(file) {
 return this.qnUpload(file)
 }

 // 圖片上傳成功回調(diào) 插入到編輯器中
 upScuccess(e, file, fileList) {
 this.fullscreenLoading = false
 let vm = this
 let url = ''
 if (this.uploadType === 'image') { // 獲得文件上傳后的URL地址
 url = STATICDOMAIN + e.key
 } else if (this.uploadType === 'video') {
 url = STATVIDEO + e.key
 }
 if (url != null && url.length > 0) { // 將文件上傳后的URL地址插入到編輯器文本中
 let value = url
 vm.addRange = vm.$refs.myQuillEditor.quill.getSelection()
 value = value.indexOf('http') !== -1 ? value : 'http:' + value
 vm.$refs.myQuillEditor.quill.insertEmbed(vm.addRange !== null ? vm.addRange.index : 0, vm.uploadType, value, Quill.sources.USER) // 調(diào)用編輯器的 insertEmbed 方法，插入U(xiǎn)RL
 } else {
 (<any>this).$message.error(`${vm.uploadType}插入失敗`)
 }
 this.$refs['upload'].clearFiles() // 插入成功后清除input的內(nèi)容
 }

 // 點(diǎn)擊圖片ICON觸發(fā)事件
 imgHandler(state) {
 this.addRange = this.$refs.myQuillEditor.quill.getSelection()
 if (state) {
 let fileInput = document.getElementById('imgInput')
 fileInput.click() // 加一個(gè)觸發(fā)事件
 }
 this.uploadType = 'image'
 }

 // 點(diǎn)擊視頻ICON觸發(fā)事件
 videoHandler(state) {
 this.addRange = this.$refs.myQuillEditor.quill.getSelection()
 if (state) {
 let fileInput = document.getElementById('imgInput')
 fileInput.click() // 加一個(gè)觸發(fā)事件
 }
 this.uploadType = 'video'
 }

 // 編輯器光標(biāo)離開 將編輯器內(nèi)容發(fā)射給父組件
 onEditorBlur(editor) {
 this.$emit('getValue', this.content)
 }

 // 編輯器獲得光標(biāo)
 onEditorFocus(editor) {
 editor.enable(true) // 實(shí)現(xiàn)達(dá)到上限字符可刪除
 }

 // 編輯器文本發(fā)生變化
 onEditorChange({ editor, html, text }) {
 let textLength = text.length
 if (textLength > 10000) {
 (<any>this).$message.error('最多輸入10000個(gè)字符')
 editor.enable(false)
 }
 this.$emit('getValue', this.content)
 }

 // 清除編輯器內(nèi)容
 callMethod() {
 this.content = ''
 }

 // 頁面加載后執(zhí)行 為編輯器的圖片圖標(biāo)和視頻圖標(biāo)綁定點(diǎn)擊事件
 mounted() {
 // 為圖片ICON綁定事件 getModule 為編輯器的內(nèi)部屬性
 this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
 this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.videoHandler) // 為視頻ICON綁定事件
 }
}