先上Demo

最近笔者在Vue3开发过程中需要使用到富文本编辑器，最后找到这个插件，觉得挺不错，如果有开发者也有这样的需求，可以试试

先上demo:

Vue3使用方法

安装

yarn add @wangeditor/editor# 或者 npm install @wangeditor/editor --saveyarn add @wangeditor/editor-for-vue@next# 或者 npm install @wangeditor/editor-for-vue@next --save

使用

模板

<template><div style="border: 1px solid #ccc"><Toolbarstyle="border-bottom: 1px solid #ccc":editor="editorRef":defaultConfig="toolbarConfig":mode="mode"/><Editorstyle="height: 500px; overflow-y: hidden;"v-model="valueHtml":defaultConfig="editorConfig":mode="mode"@onCreated="handleCreated"/></div></template>

script

<script>import '@wangeditor/editor/dist/css/style.css' // 引入 cssimport {onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'import {Editor, Toolbar } from '@wangeditor/editor-for-vue'export default {components: {Editor, Toolbar },setup() {// 编辑器实例，必须用 shallowRefconst editorRef = shallowRef()// 内容 HTMLconst valueHtml = ref('<p>hello</p>')// 模拟 ajax 异步获取内容onMounted(() => {setTimeout(() => {valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'}, 1500)})const toolbarConfig = {}const editorConfig = {placeholder: '请输入内容...' }// 组件销毁时，也及时销毁编辑器onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()})const handleCreated = (editor) => {editorRef.value = editor // 记录 editor 实例，重要！}return {editorRef,valueHtml,mode: 'default', // 或 'simple'toolbarConfig,editorConfig,handleCreated};}}</script>

注意：

editorRef 必须用 shallowRef组件销毁时，要及时销毁编辑器

更多详细配置可见官网：官网地址