富文本rich-text

<template>
	<div class="rich-text">
		<quill-editor ref="text" v-model="htmlString" class="myQuillEditor" :options="editorOption" />
	</div>
</template>

<script>
	import 'quill/dist/quill.core.css' // import styles
	import 'quill/dist/quill.snow.css' // for snow theme
	import 'quill/dist/quill.bubble.css' // for bubble theme
	import {
		quillEditor,
		Quill
	} from 'vue-quill-editor';
	import {
		container,
		addQuillTitle
	} from 'quill-video-image-module';
	import {
		ImageExtend,
		QuillWatch
	} from 'quill-video-image-module';
	import {
		VideoExtend,
		QuillVideoWatch
	} from 'quill-video-image-module'
	// import ImageResize from 'quill-image-resize-module'
	// 引入video模块并注册
	import video from 'quill-video-image-module/video'
	Quill.register(video, true)
	// Quill.register('modules/ImageResize', ImageResize)
	Quill.register('modules/ImageExtend', ImageExtend)
	Quill.register('modules/VideoExtend', VideoExtend)

	const toolbarOptions = [
		['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
		['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
		[{
			header: 1
		}, {
			header: 2
		}], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
		[{
			list: 'ordered'
		}, {
			list: 'bullet'
		}], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
		[{
			script: 'sub'
		}, {
			script: 'super'
		}], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
		[{
			indent: '-1'
		}, {
			indent: '+1'
		}], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
		// [{'direction': 'rtl'}], // 文本方向-----[{'direction': 'rtl'}]
		[{
			size: ['small', false, 'large', 'huge']
		}], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
		// [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
		[{
			color: []
		}, {
			background: []
		}], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
		// [{ font: [] }], // 字体种类-----[{ font: [] }]
		[{
			align: []
		}], // 对齐方式-----[{ align: [] }]
		['clean'], // 清除文本格式-----['clean']
		['image'], // 链接、图片、视频-----['link', 'image', 'video']
		['link'],
		['video'],
	];
	export default {
		name: 'richText',
		components: {
			quillEditor
		},
		props: {
			htmlStr: { // 富文本回显
				type: String
			}
		},
		// 禁调：富文本复制功能

		data() {
			// 测试数据
			let token =
				// 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJtb2JpbGUiOiI0ODEiLCJleHAiOjE2MTE4MTI4MzR9.X5zyf6jvuSbt6gBUkkkcQ2zbmQDZ3jL_4MS5InnTOyc'
				'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJtb2JpbGUiOiI0ODEiLCJleHAiOjE2MTE5MDI2OTB9.TEJNKgWUb23ZI2xyyxTsAOcIruJo30SkOlcwGHVjagw'
			return {
				htmlString: '',
				textPicSuc: true, // 是否有正在上传的信息
				editorOption: {
					theme: "snow", // or 'bubble'
					placeholder: "请输入",
					modules: {
						// ImageResize: {},
						ImageExtend: {
							loading: true,
							name: 'file',
							size: 15, // M
							action: '',
							response: (res) => {
								return res.data.path
							},
							sizeError: (res) => {
								this.$message({
									message: '上传图片不能超过10M',
									type: 'error'
								});
							},
							start: () => {
								this.textPicSuc = false
							},
							error: () => {
								this.$message({
									message: '图片上传失败,请重新上传',
									type: 'error'
								});
							},
							success: () => {
								this.textPicSuc = true
							},
						},
						VideoExtend: {
							loading: true,
							name: 'file',
							action: '',
							// size: 100, // M
							headers: (xhr) => {
								// set custom token(optional)
								// xhr.setRequestHeader('token', this.token)
							},
							response: (res) => {
								return res.data.path
							},
							start: () => {
								this.textPicSuc = false
							},
							error: () => {
								this.$message({
									message: '视频上传失败,请重新上传',
									type: 'error'
								});
							},
							success: () => {
								this.textPicSuc = true
							},
						},
						toolbar: {
							container: toolbarOptions,
							handlers: {
								'image': function(val, a, b) {
									QuillWatch.emit(this.quill.id)
								},
								'video': function() {
									QuillVideoWatch.emit(this.quill.id)
								}
							}
						}
					}
				}
			}
		},
		mounted: function() {
			if (this.htmlStr) {
				this.htmlString = this.htmlStr
			}
		},
		methods: {}
	}
</script>

<style scoped>
	.myQuillEditor {
		height: 500px;

		>>>.ql-container {
			height: 85%;
		}
	}
</style>
<!-- https://github.com/lw1995/quill-video-image-module -->