Vue development - Rich text editor vue-quill-editor supports video and picture uploads

main.js 1 introduced vue-quill-editor

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);

2 Use

<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>

It should be noted that editorOption must be configured

Because of its style so that it is not stopped at the initial display configuration module more compact tools

If you need to upload pictures or videos inside the module will need to transform the reconstruction of the toolbar (use the handler)

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);
				}
			},
		}
	}
}

Configured the later will find the entire rich text editor toolbar does not change, or retain only a few basic rich text features.

This is because the handler is used to define custom programs, and add a custom handler will cover its province toolbars and main act so we have to re-configure itself under the toolbar they need to configure all features are as follows , you can also demand configuration

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
	]

At this point the Text tool will be enriched

so that it will be a toolbar interface to upload pictures and videos, then you can images and videos in the tool bar configuration in the configuration in upload pictures or video, you can click based on its to give him appropriate treatment response, can redirect their events, here I am here to tell you redirect events

First, define an upload component, here it is my own upload component written

<div class='avatar-uploader'>
	<myUp v-on:getImgUrl='AddInputUrl'></myUp>
</div>

Set the appropriate property values ​​and events

<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>

It should be noted that if you want to upload directly if you need to use the pointer function that locks when the toolbar settings Click on the picture to upload to do other operations

Since I wrote it myself upload so rich text to be inserted into the interior so time to add content requires the addition of IMG tag, because the internal rich text support parsing of the picture

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
}

Achieve a rich text support upload pictures here will do the work, then for the next video, rich text introduced since the majority are no built-in video player so rich text inside the tag will fail, where I'd choose directly IFRAME tag

var bq='<iframe frameborder="0" width="100%" height="40%" '+ src+' allowfullscreen></iframe>'
this.value += bq

Reprinted: https://www.cnblogs.com/tanshao/p/9487785.html