今天在VUE里面插入富文本遇到了一些小坑在這里提供給大家用於參考，如有錯誤，望多加指正。
我這里使用的是元素的用戶界面的上傳圖片組件
首先引入元素的UI（這個我就不作贅述了，詳情參考element-ui官方文檔）
在引入富文本組件VUE-鵝毛筆編輯器
使用在main.js引入相應的樣式
import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor);
現在就可以在VUE中使用富文本
<template> <!--富文本編輯器--> <el-form-item label="內容" :label-width="formLabelWidth"> <quill-editor v-model="value" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)"> </quill-editor> </el-form-item> </template> <script> export default { data() { return { value:'', editorOption: { placeholder: '請輸入院校簡介', theme: 'snow', modules: {} } }, methods: { onEditorChange() { console.log(this.value) } } } </script>這里需要注意的是editorOption是必須要配置的
其樣式由於沒有在模塊配置工具攔所以它的出事顯示就較為簡潔
如果需要上傳圖片或者視頻就需要對模塊里面對工具欄進行改造重構（使用處理程序）
modules: {
toolbar: { handlers: { container: toolbarOptions, // 工具欄 'image': function(value) { if(value) { alert(1) } else { this.quill.format('image', false); } }, 'video': function(value) { if(value) { alert(2) } else { this.quill.format('image', false); } }, } } }配置好了過后會發現整個富文本編輯器的工具欄沒有改變，還是只保留了幾個基本的富文本功能。
這個是因為處理程序是用來定義自定義程序的，而添加自定義處理程序就會覆蓋它本省的工具欄和主體行為所以我們還要再自行配置下自己需要的工具欄，所有功能的配置如下，大家也可以按需配置
const toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'], // toggled buttons ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], // custom button values [{ 'list': 'ordered' }, { 'list': 'bullet' }], [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent [{ 'direction': 'rtl' }], // text direction [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme [{ 'font': [] }], [{ 'align': [] }], ['link', 'image', 'video'], ['clean'] // remove formatting button ]此時的文本工具就會豐富了
這樣它的工具欄就會有上傳圖片和視頻的接口，然后你就可以在工具攔的配置里的圖像和視頻里配置上傳圖片或視頻，可以根據它的點擊來給他相應的處理回應，也可以為其重新定向事件，這里我這里給大家介紹重新定向事件
首先定義一個上傳組件，我這里用的是自己寫好的上傳組件
<div class='avatar-uploader'> <myUp v-on:getImgUrl='AddInputUrl'></myUp> </div>設置好相應屬性值和事件
<script>
import myUp from '@/page/test' //上傳組件 export default { data() { return { value:'', editorOption: { placeholder: '請輸入院校簡介', theme: 'snow', // or 'bubble' modules: { toolbar: { container: toolbarOptions, // 工具欄 handlers: { 'image': function(value){ if(value) { // console.log(this.serverUrl) document.querySelector('.avatar-uploader').click() // alert(1) } else { this.quill.format('image', false); } }, 'video': function(value) { if(value) { alert(2) } else { this.quill.format('image', false); } }, } } } }, } }, methods: { onEditorChange() { console.log(this.value) var conten = this.value this.$emit('getText',conten) } } } </script>這里需要注意的是如果想直接實現上傳的話就需要在工具欄設置點擊圖片上傳的時候用指針函數將這種鎖定再做其他操作
由於我是自己寫的上傳所以要插入到富文本內部所以添加內容的時候需要加入IMG標簽，因為富文本內部是支持圖片的解析的
AddInputUrl(data) {
var a = data var tp = a.length var imghz = a.slice(tp - 4, tp) var src = 'src="' + a + '"' var bq = "<img " + src + " alt='' />" this.value += bq }做到這里一個支持上傳圖片的富文本就做好了，再來說下視頻，由於引入的富文本絕大多數都是沒有內置的播放器所以視頻標簽在富文本里面會失效，在這里我就選擇直接用IFRAME標簽
var bq='<iframe frameborder="0" width="100%" height="40%" '+ src+' allowfullscreen></iframe>' this.value += bq以上就是我對VUE引入富文本的一點小理解，希望大家多多指點哦