vue3+wangeditor富文本编辑器详细教程

一、前言

在这篇教程中，我将指导如何使用 Vue 3 和 WangEditor 创建一个功能丰富的富文本编辑器。WangEditor 是一个轻量级的富文本编辑器，它非常适合集成到 Vue 项目中。这个例子展示了如何配置富文本编辑器，包括工具栏、编辑器配置以及如何处理提交。此外，还将介绍如何在组件销毁时正确销毁编辑器实例，来防止内存泄漏。

二、效果展示

废话不多说直接看效果,文章最后有效果展示的全部代码，有需要的小伙伴可以自取。

三、使用流程和代码讲解

1.安装 WangEditor

npm install @wangeditor/editor --save

2. 导入必需的资源

import { ref, shallowRef, onBeforeUnmount } from 'vue'
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

3.编辑器实例，必须用 shallowRef

const editorRef = shallowRef()

4.记录编辑器创建后的实例

const handleCreated = (editor) => {editorRef.value = editor
}

5.工具栏配置（下面是几个常用的工具栏配置）

const toolbarConfig = {toolbarKeys: ["headerSelect",  // 标题选择'bold', // 加粗'italic', // 斜体'through', // 删除线'underline', // 下划线'justifyCenter', // 居中对齐'justifyJustify', // 两端对齐'justifyLeft', // 左对齐'justifyRight', // 右对齐'bulletedList', // 无序列表'numberedList', // 有序列表'color', // 文字颜色'insertLink', // 插入链接'fontSize', // 字体大小'lineHeight', // 行高'delIndent', // 缩进'indent', // 增进'divider', // 分割线'insertTable', // 插入表格'undo', // 撤销'redo', // 重做'clearStyle', // 清除格式'fullScreen', // 全屏"blockquote", // 引用"codeBlock", // 代码块"insertImage", // 插入图片"uploadImage", // 上传图片"insertVideo", // 插入视频]
}

6.编辑器配置

const editorConfig = {placeholder: '请输入内容...', //初始的提示内容MENU_CONF: {uploadImage: {server: 'https://.....',  // 图片上传接口fieldName: 'file',  // 上传字段名，根据自己的接口参数配置}}
}

7.组件销毁时同时销毁编辑器实例防止内存泄漏

onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()  // 销毁 editor 实例
})

四、全部代码

<template><div style="border: 1px solid #ccc;min-width: 365px; max-width: 100%; "><Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" /><Editor style="height: 500px; overflow-y: hidden;" v-model="content" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" /></div><button @click="submit">提交</button>
</template><script setup>
import { ref, reactive, shallowRef, onBeforeUnmount } from 'vue'
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
const content = ref('')const submit = () => {console.log(content.value);
} // 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()// 工具栏配置
const toolbarConfig = {toolbarKeys: ["headerSelect",  // 标题选择'bold', // 加粗'italic', // 斜体'through', // 删除线'underline', // 下划线'justifyCenter', // 居中对齐'justifyJustify', // 两端对齐'justifyLeft', // 左对齐'justifyRight', // 右对齐'bulletedList', // 无序列表'numberedList', // 有序列表'color', // 文字颜色'insertLink', // 插入链接'fontSize', // 字体大小'lineHeight', // 行高'delIndent', // 缩进'indent', // 增进'divider', // 分割线'insertTable', // 插入表格'undo', // 撤销'redo', // 重做'clearStyle', // 清除格式'fullScreen', // 全屏"blockquote", // 引用"codeBlock", // 代码块"insertImage", // 插入图片"uploadImage", // 上传图片"insertVideo", // 插入视频]
}// 编辑器配置
const editorConfig = {placeholder: '请输入内容...',MENU_CONF: {uploadImage: {server: 'https://.....', // 上传接口 URLfieldName: 'file', // 图片字段名称// meta: {//   token: '您的认证token' // 如果需要的话// },}}
}// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {const editor = editorRef.valueif (editor == null) returneditor.destroy()
})const handleCreated = (editor) => {editorRef.value = editor // 记录 editor 实例，重要！
}</script><style lang='scss' scoped>
button{margin-top: 20px;padding: 2px 5px;background-color: #57a3ef;border: none;color: #fff;border-radius: 2px;
}
</style>