今天在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引入富文字的一點小理解，希望大家多多指點哦