vue-quill-editor富文本编辑器

效果图：

1、下载安装vue-quill-editor

npm install vue-quill-editor --save

图片缩放、拖拽

npm install quill-image-drop-module -S    //允许粘贴图像并将其拖放到编辑器中。
npm install quill-image-resize-module -S  //允许调整图像大小

<template><div style="position: relative"><!--		@blur="setValue" 原本是用失去焦点返回值的--><QuillEditorref="myQuillEditor"id="richText"theme="snow":key="value"v-model:content="content":options="editorOptions"contentType="html"class="rt-ql-editor"style="height: 300px; box-sizing: content-box"/><a-spin :spinning="spinning" tip="上传中..." style="position: absolute; top: 80px; left: 50%" /><!-- 使用自定义图片上传,如未使用下方的图片上传和视频上传，将直接转成base64形式存储 --><inputtype="file"multipleaccept="image/*"id="richImg"class="richImg richButton-hidden"style="display: none"@change="uploadImage"/><inputtype="file"accept="video/*"id="richVideo"class="richVideo richButton-hidden"style="display: none"@change="uploadVideo"/><!--		<button @click="moni" style="margin-top:30px;">模拟图片上传</button>--></div>
</template><script>// import { $axios, $get, $post } from "@/utils/axios.ts";import { Quill, QuillEditor } from '@vueup/vue-quill'import '@vueup/vue-quill/dist/vue-quill.snow.css'import 'quill-image-resize-module/image-resize.min.js'import video from './video.js'import fileApi from '@/api/dev/fileApi'import { ImageDrop } from 'quill-image-drop-module'Quill.register('modules/imageDrop', ImageDrop)Quill.register(video)export default {name: 'RichText',components: { QuillEditor },props: ['value'],data() {return {spinning: false,content: '',editorOptions: {modules: {// imageDrop:true,imageResize: {displayStyles: {backgroundColor: 'black',border: 'none',color: 'white'},modules: ['Resize', 'DisplaySize', 'Toolbar']},toolbar: {container: [['bold', 'italic', 'underline', 'strike'],['blockquote', 'code-block'],[{ size: ['small', false, 'large', 'huge'] }],[{ font: [] }],[{ align: [] }],[{ list: 'ordered' }, { list: 'bullet' }],[{ indent: '-1' }, { indent: '+1' }],[{ header: 1 }, { header: 2 }],['image', 'video'],[{ direction: 'rtl' }],[{ color: [] }],[{ background: [] }]],handlers: {//如果需要上传图片/视频 到后台，然后在富文本框添加图片的地址，则可在handlers 里添加图片/视频处理函数。如果可以接受图片在富文本框中是base64形式，则无需设置。image: function (value) {if (value) {document.querySelector('.richImg').click()}},video: function (value) {if (value) {document.querySelector('.richVideo').click()}}}}},placeholder: '请输入内容...'},titleConfig: [{ Choice: '.ql-bold', title: '加粗' },{ Choice: '.ql-italic', title: '斜体' },{ Choice: '.ql-underline', title: '下划线' },{ Choice: '.ql-header', title: '段落格式' },{ Choice: '.ql-strike', title: '删除线' },{ Choice: '.ql-blockquote', title: '块引用' },{ Choice: '.ql-code', title: '插入代码' },{ Choice: '.ql-code-block', title: '插入代码段' },{ Choice: '.ql-font', title: '字体' },{ Choice: '.ql-size', title: '字体大小' },{ Choice: '.ql-list[value="ordered"]', title: '编号列表' },{ Choice: '.ql-list[value="bullet"]', title: '项目列表' },{ Choice: '.ql-direction', title: '文本方向' },{ Choice: '.ql-header[value="1"]', title: 'h1' },{ Choice: '.ql-header[value="2"]', title: 'h2' },{ Choice: '.ql-align', title: '对齐方式' },{ Choice: '.ql-color', title: '字体颜色' },{ Choice: '.ql-background', title: '背景颜色' },{ Choice: '.ql-image', title: '图像,支持多图上传' },{ Choice: '.ql-video', title: '视频,小程序不支持' },{ Choice: '.ql-link', title: '添加链接' },{ Choice: '.ql-formula', title: '插入公式' },{ Choice: '.ql-clean', title: '清除字体格式' },{ Choice: '.ql-script[value="sub"]', title: '下标' },{ Choice: '.ql-script[value="super"]', title: '上标' },{ Choice: '.ql-indent[value="-1"]', title: '向左缩进' },{ Choice: '.ql-indent[value="+1"]', title: '向右缩进' },{ Choice: '.ql-header .ql-picker-label', title: '标题大小' },{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },{ Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },{ Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },{ Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }]}},watch: {//获取父组件的值，更新内容value: {handler(newData, oldData) {this.setInitValue()},deep: true,immediate: false}},created: function () {console.log(this.value, 999999)this.content = JSON.parse(JSON.stringify(this.value))},mounted() {this.addQuillTitle()this.$el.children[0].value = this.value},methods: {//模拟图片上传moni() {this.upFile('test', 'image')},//设置初始值async setInitValue() {if (this.value) {let szContent = JSON.parse(JSON.stringify(this.value))this.content = szContent}},//上传图片 多张图片async uploadImage(e) {// this.upFile('a','image');var files = document.getElementById('richImg').filesconsole.log('图片', files[0])for (let i = 0; i < files.length; i++) {await this.upFile(files[i], 'image')}e.target.value = ''},//上传视频async uploadVideo(e) {var file = document.getElementById('richVideo').files[0]await this.upFile(file, 'video')e.target.value = ''},//上传文件的apiasync upFile(file, type) {this.spinning = true//上传方法：const data = new FormData()//使用append存储信息，append('键名','键值')data.append('file', file)await fileApi.fileUploadTencentReturnUrl(data).then((res) => {this.spinning = falseif (res) {this.insertImgOrVideo(res, type)} else {this.$message.warning(res.msg)}}).catch((e) => {this.$message.warning(e.msg)})},//插入图片或视频insertImgOrVideo(url, type) {let quill = this.$refs.myQuillEditor.getQuill()// 获取光标所在位置const length = quill.getSelection().indexconst reader = new FileReader()//range 是光标位置，但是这里找不到let range = quill.getSelection()// let length = (this.content).length || 0;//无法获取光标的位置，暂时先放在文本最后。如果你有解决方案，欢迎告知~//let length = quill.getSelection().index;if (type === 'image') {quill.insertEmbed(length, type, url)} else {quill.insertEmbed(length, 'simpleVideo', {url: url,controls: 'controls',width: '50%',height: '50%'})}quill.setSelection(length + 1)reader.onerror = function (error) {console.log('error', error)}},//值返回父组件setValue() {this.$emit('on-richText', this.content)},//toobar的提示addQuillTitle() {let titleConfig = JSON.parse(JSON.stringify(this.titleConfig))// console.log('this.titleConfig', titleConfig);document.getElementsByClassName('ql-editor')[0].dataset.placeholder = ''for (let item of titleConfig) {let tip = document.querySelector('.ql-toolbar ' + item.Choice)if (!tip) continuetip.setAttribute('title', item.title)}}}}
</script><style scoped>.rt-ql-editor {height: 200px;}.ql-toolbar.ql-snow .ql-formats {margin-right: 5px;}/* 调整样式 */:deep(.ql-editor) {min-height: 180px;}:deep(.ql-formats) {height: 21px;line-height: 21px;}.richButton-hidden {display: none;}
</style>

video.js

const BlockEmbed = Quill.import('blots/block/embed')
/*** 用于插入视频的Blot*/
class VideoBlot extends BlockEmbed {static create (value) {let 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;}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;