vue3·富文本编辑器

npm install @jsdawn/vue3-tinymce

import Vue3Tinymce from '@jsdawn/vue3-tinymce';

<template>
  <vue3-tinymce v-model="state.content" :setting="state.setting" />
</template>

npm install @vueup/vue-quill@latest --save
# OR
yarn add @vueup/vue-quill@latest

import { QuillEditor } from '@vueup/vue-quill'
    import '@vueup/vue-quill/dist/vue-quill.snow.css';

<div class="box">
    <quill-editor ref="myQuillEditor" 
    @blur="onEditorBlur($event)" 
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)" 
    :toolbar="toolbarOptions" 
    theme="snow"
     ret="refQuillEditor"
    v-model:content="content"
     />
   <!-- opacity:0 用于隐藏上传图片 -->
   <input type="file" id="file" :onchange="changeFile" style="opacity:0;" />
 </div>

 let toolbar = { //工具栏目
		container: [
			['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
			['blockquote', 'code-block'], //引用，代码块
			[{
				'header': 1
			}, {
				'header': 2
			}], // 几级标题
			[{
				'list': 'ordered'
			}, {
				'list': 'bullet'
			}], // 有序列表，无序列表
			[{
				'script': 'sub'
			}, {
				'script': 'super'
			}], // 下角标，上角标
			[{
				'indent': '-1'
			}, {
				'indent': '+1'
			}], // 缩进
			[{
				'direction': 'rtl'
			}], // 文字输入方向
			[{
				'size': ['small', false, 'large', 'huge']
			}], // 字体大小
			[{
				'header': [1, 2, 3, 4, 5, 6, false]
			}], // 标题
			[{
				'color': []
			}, {
				'background': []
			}], // 颜色选择
			[{
				'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial']
			}], // 字体
			[{
				'align': []
			}], // 居中
			['clean'], // 清除样式,
			['link', 'image', 'video'], // 上传图片、上传视频
		],
		handlers: { //点击工具栏目 图片标签
			image: function(value) {
				console.log(value)
				if (value) {
					// 调用原生的图片上传组件
					var file = document.getElementById('file')
					file.click()
					
					// 插入图片
					this.quill.insertEmbed(length, 'image', "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg")
					// 调整光标到最后
					this.quill.setSelection(length + 1)
				} else {
					this.quill.format('image', false)
				}
			}
		}
	}
	const refQuillEditor = ref(); //链接节点
	function changeFile(el) {
		console.log('接收选择的文件：', el);
     
        //  axios.post上传图片返回地址
        let quill = refQuillEditor.value.getQuill() //获取节点
        let length = quill.getSelection().index //获取光标位置
        //插入图片
        quill.insertEmbed(length, 'image', res.data)
        // 调整光标到最后
        quill.setSelection(length + 1)
	}
	

    const onEditorBlur = (quill) => {
        console.log('1editor blur!', quill.value)
    }

    const onEditorFocus = (quill) => {
        console.log('2editor focus!', quill)
    }

    const onEditorReady = (quill) => {
        console.log('3editor ready!', quill)
    }