今天在vue里面插入富文本遇到了一些小坑在這里提供給大家用于參考，如有錯誤，望多加指正。
我這里使用的是Element-ui的上傳圖片組件
首先引入Element-ui(這個我就不作贅述了，詳情參考element中文官網)
在引入富文本組件vue-quill-editor
使用在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配置工具攔所以它的出事顯示就較為簡潔
如果需要上傳圖片或者視頻就需要對模塊里面對工具欄進行改造重構(使用handlers)
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); } }, } } }配置好了過后會發現整個富文本編輯器的工具欄沒有改變，還是只保留了幾個基本的富文本功能。
這個是因為handlers是用來定義自定義程序的，而添加自定義處理程序就會覆蓋它本省的工具欄和主體行為所以我們還要再自行配置下自己需要的工具欄，所有功能的配置如下，大家也可以按需配置
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 ]此時的文本工具就會豐富了
這樣它的工具欄就會有上傳圖片和視頻的接口，然后你就可以在工具攔的配置里的image和video里配置上傳圖片或視頻，可以根據它的點擊來給他相應的處理回應，也可以為其重新定向事件，這里我這里給大家介紹重新定向事件
首先定義一個上傳組件，我這里用的是自己寫好的上傳 組件
<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>這里需要注意的是如果想直接實現上傳的話就需要在工具欄設置點擊圖片上傳的時候用指針函數將this鎖定再做其他操作
由于我是自己寫的上傳所以要插入到富文本內部所以添加內容的時候需要加入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}做到這里一個支持上傳圖片的富文本就做好了，再來說下視頻，由于引入的富文本絕大多數都是沒有內置的播放器所以video標簽在富文本里面會失效，在這里我就選擇直接用iframe標簽
var bq='<iframe frameborder="0" width="100%" height="40%" '+ src+' allowfullscreen></iframe>'this.value += bq
總結
以上所述是小編給大家介紹的vue富文本框（插入文本、圖片、視頻）的使用及問題小結，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
