在项目中使用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>
复制代码