在項目中使用vue-quill-editor

最近自愛項目中遇到了富文本的使用，因此記錄一下，嘻嘻

vue-quill-editor

npm install vue-quill-editor --save
複製代碼

富文本組件

<!--整個組件依附的包-->
import Quill from 'quill';
import { quillEditor } from 'vue-quill-editor';
<!--上傳視頻的時候使用video組件，而不是默認的iframe-->
import VideoBlot from './video';
Quill.register(VideoBlot);
複製代碼

使用這個組件的緣由

但願能夠傳本地圖片和本地視頻

本地圖片在默認組件中是能夠傳的，可是獲得的內容是base64，在傳到後臺的時候，後臺的內存不夠，因此這裏也用了本身的代碼替代組件本來的上傳

這裏的uploader是使用elementui本身封裝的組件，用來上傳

其中遇到的問題

• 劫持圖片和劫持視頻的元素的id不能同樣
• 當一個頁面中有多個富文本的時候，會致使只有第一個富文本是好使的，這是由於：

當頁面有兩個富文本的時候，劫持圖片和劫持視頻的元素是固定的，因此劫持事件中獲取的元素永遠都是第一個，因此這個時候不能固定元素的id，須要從父組件中傳入不同的id，這樣獲取的元素就是各自的元素

<div class="edit_container" style="width: 100%;height: 100%">
	<quill-editor
		v-model="content"
		ref="myQuillEditor"
		:options="editorOption"
		@blur="onEditorBlur($event)"
		@change="onEditorChange($event)">
	</quill-editor>
	<!-- 劫持本來視頻上傳事件，實現視頻上傳 -->
	<!-- accept：video/mp4 -->
	<Uploader
		class="uploadVideo"
		:id="idVideo"
		ref="uploadFileVideo"
		:accept="acceptVideo"
		showListType="picture-card"
		:multiple="false"
		:showFileList="false"
		:fileList="videoFileList"
		@getUploadImg="getUploadVideo"
		style="opacity: 0; width: 0; height: 0;cursor: pointer"
	/>
	<!-- 劫持本來圖片上傳事件，實現圖片上傳 -->
	<!-- accept: image/jpg -->
	<Uploader
		class="uploadImage"
		:id="idImage"
		ref="uploadFileImage"
		:accept="acceptImage"
		showListType="picture-card"
		:multiple="false"
		:showFileList="false"
		:fileList="imageFileList"
		@getUploadImg="getUploadImg"
		style="opacity: 0; width: 0; height: 0;cursor: pointer"
	/>
</div>
複製代碼

data() {
    return {
        // toolbar的配置
        editorOption: {
        	placeholder: '輸入文本...',
        	theme: 'snow', // 主題
        	modules: {
        		imageResize: {   // 添加圖片拖拽上傳，自定義大小
        			displayStyles: {   // 添加
        				backgroundColor: 'black',
        				border: 'none',
        				color: 'white',
        			},
        			modules: ['Resize', 'DisplaySize', 'Toolbar'],   // 添加
        		},
        		toolbar: {
        			container: [
        				['bold', 'italic', 'underline', 'strike'],    // 加粗，斜體，下劃線，刪除線
        				['blockquote', 'code-block'],     // 引用，代碼塊
        				[{ header: 1 }, { header: 2 }],        // 標題，鍵值對的形式；一、2表示字體大小
        				[{list: 'ordered'}, { list: 'bullet' }],     // 列表
        				[{script: 'sub'}, { script: 'super' }],   // 上下標
        				[{indent: '-1'}, { indent: '+1' }],     // 縮進
        				[{ direction: 'rtl' }],             // 文本方向
        				[{ header: [1, 2, 3, 4, 5, 6, false] }],     // 幾級標題
        				[{ color: [] }, { background: [] }],     // 字體顏色，字體背景顏色
        				[{ align: [] }],    // 對齊方式
        				['clean'],    // 清除字體樣式
        				['image', 'video'],    // 上傳圖片、上傳視頻
        			],
        			handlers: {
        			    // 劫持原來的視頻點擊按鈕事件
        				video: (val: boolean) => {
        					(document.querySelector(`#${this.idVideo} input`) as any).click();
        				},
        				// 劫持原來的圖片點擊按鈕事件
        				image: (val: boolean) => {
        					(document.querySelector(`#${this.idImage} input`) as any).click();
        				},
        			},
        		},
        	},
        };
    }
}
複製代碼

methods: {
        // 失去焦點
	onEditorBlur(e) {
		console.log(e);
	}

        // 富文本的內容改變
	onEditorChange(e) {
		console.log(e);
		this.$emit('currentText', e.html);
	}

	insertEle(type, url) {
		const quill = this.$refs.myQuillEditor.quill;
		const length = quill.getSelection().index;

		if (type === 'video') {
			quill.insertEmbed(length, 'simpleVideo', {
				url,
				controls: 'controls',
				width: '30%',
				height: 'auto',
			});
		} else {
			quill.insertEmbed(length, type, url);
		}
		// 調整光標到最後
		quill.setSelection(length + 1);
	}

	// 上傳視頻(上傳組件中獲得的上傳的內容)
	public getUploadVideo(image, type) {
		this.insertEle('video', image.url);
	}

	// 上傳圖片(上傳組件中獲得的上傳的內容)
	public getUploadImg(image, type) {
		this.insertEle('image', image.url);
	}
}
複製代碼

video文件

• 插入視頻的時候使用video標籤，默認是一個iframe

<!-- video.js -->
import Quill from 'quill';
const BlockEmbed = Quill.import('blots/block/embed');
class VideoBlot extends BlockEmbed {
public static create(value) {
	const node = super.create();
	node.setAttribute('src', value.url);
	node.setAttribute('controls', value.controls);
	node.setAttribute('width', value.width);
	node.setAttribute('height', value.height);
	node.setAttribute('webkit-playsinline', true);
	node.setAttribute('playsinline', true);
	node.setAttribute('x5-playsinline', true);
	return node;
}
public static value(node) {
	return {
		url: node.getAttribute('src'),
		controls: node.getAttribute('controls'),
		width: node.getAttribute('width'),
		height: node.getAttribute('height'),
	};
}
}
VideoBlot.blotName = 'simpleVideo';
VideoBlot.tagName = 'video';
export default VideoBlot;
複製代碼

默認的時候圖片是不能縮放的

<!--改變圖片大小的插件-->
npm install quill-image-resize-module --save
複製代碼

import imageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', imageResize);
複製代碼

可是這樣仍是不行的，會報錯，忘了是啥，須要在vue.config.js中加上配置

configureWebpack: {
	plugins: [
		new webpack.ProvidePlugin({
			'window.Quill': 'quill/dist/quill.js',
			'Quill': 'quill/dist/quill.js'
		})
	]
}
複製代碼

頁面中使用

<el-form-item label="添加中文描述" prop="msgZh">
	<quill-editor
		ref="editorZh"
		// 傳入的video   id
		idVideo="editorZhVideo"
		// 傳入的image   id
		idImage="editorZhImage"
		// 回顯的值
		:value="msgZh"
		// 獲取富文本的值
		@currentText="currentTextZh"/>
</el-form-item>
<el-form-item label="添加英文描述">
	<quill-editor
		ref="editorEn"
		// 傳入的video   id
		idVideo="editorEnVideo"
		// 傳入的image   id
		idImage="editorEnImage"
		// 回顯的值
		:value="msgEn"
		// 獲取富文本的值
		@currentText="currentTextEn"/>
</el-form-item>
複製代碼