Recently self love project encountered the use of rich text, so record, hee hee

vue-quill-editor

npm install vue-quill-editor --save
Copy the code

Rich text component

<! --> import Quill from'quill';
import { quillEditor } from 'vue-quill-editor'; <! -- Use the video component instead of the default iframe--> import VideoBlot from'./video';
Quill.register(VideoBlot);
Copy the code

Reasons for using this component

Want to be able to upload local pictures and local videos

Local images can be uploaded in the default component, but the resulting content is Base64. When uploading to the background, the background memory is not enough, so here we also use our own code to replace the component’s original upload

The Uploader here is a component wrapped in ElementUi itself for uploading

Problems encountered

  • Hijack images and hijack videos cannot have the same element ID
  • When there is more than one rich text on a page, only the first rich text will work because:

When the page has two rich text elements, the hijacked image and hijacked video elements are fixed, so the element retrieved in the hijacking event is always the first one, so the element id cannot be fixed at this time, and a different ID needs to be passed in from the parent component, so that the retrieved elements are separate elements

<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> <! -- Hijack the original video upload event, realize the video upload --> <! -- 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"/ > <! -- Hijack the original picture upload event, realize the picture upload --> <! -- 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>
Copy the code
data() {
    return{// Toolbar configuration editorOption: {placeholder:'Enter text... ',
        	theme: 'snow', // theme modules: {imageResize: {// Add image drag upload, customize size displayStyles: {// Add backgroundColor:'black',
        				border: 'none',
        				color: 'white',
        			},
        			modules: ['Resize'.'DisplaySize'.'Toolbar'], // Add}, toolbar: {container: [['bold'.'italic'.'underline'.'strike'], // Bold, italic, underline, strikeout ['blockquote'.'code-block'], // reference, code block [{header: 1}, {header: 2}], // title, key-value pair form; 1, 2 indicate font size [{list:'ordered'}, { list: 'bullet'}], // list [{script:'sub'}, { script: 'super'}], // subscript [{indent:'1'}, { indent: '+ 1'}], // indent [{direction:'rtl'}], // Text direction [{header: [1, 2, 3, 4, 5, 6,false]}], / / a few level title [{color: []}, {background: []}], / / font color, background color of the font [{align: []}], / / alignment ['clean'], // Clear the font style ['image'.'video'Video: (val: Boolean) => {(document.querySelector('#${this.idVideo} input`) as any).click();Image: (val: Boolean) => {(document.querySelector('#${this.idImage} input`) as any).click();},},},},}; }}Copy the code
Methods: {// Lose focus onEditorBlur(e) {console.log(e); } // Rich text content changes 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); } // Adjust the cursor to last quill.setSelection(length + 1); } public getUploadVideo(image) public getUploadVideotype) {
		this.insertEle('video', image.url); } public getUploadImg(image) public getUploadImg(image,type) {
		this.insertEle('image', image.url); }}Copy the code

Video file

  • When inserting a video, use the video tag, which is an iframe by default
<! -- 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;
Copy the code

By default, images cannot be zoomed

<! NPM install quill-image-resize-module --saveCopy the code
import imageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', imageResize);
Copy the code

This will not work, it will report an error, forget what it is, need to add configuration in vue.config.js

configureWebpack: {
	plugins: [
		new webpack.ProvidePlugin({
			'window.Quill': 'quill/dist/quill.js'.'Quill': 'quill/dist/quill.js'}})]Copy the code

Page use

<el-form-item label="Add Chinese description" prop="msgZh">
	<quill-editor
		ref="editorZh"// Incoming video ID idVideo="editorZhVideo"// The passed image id idImage="editorZhImage"// The value in the command output is value="msgZh"// Get the value of rich text @currenttext ="currentTextZh"/>
</el-form-item>
<el-form-item label="Add English description">
	<quill-editor
		ref="editorEn"// Incoming video ID idVideo="editorEnVideo"// The passed image id idImage="editorEnImage"// The value in the command output is value="msgEn"// Get the value of rich text @currenttext ="currentTextEn"/>
</el-form-item>
Copy the code