最近自爱项目中遇到了富文本的使用，所以记录一下，嘻嘻

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 }], // 标题，键值对的形式；1、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>