网页链接生成_免费的网站免安装_深圳网络推广系统_网络营销八大目标是什么

一、前言 

        在这篇教程中，我将指导如何使用 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>

五、答疑解惑

        这篇教程为开发者提供了一个快速开始使用 Vue 3 和 WangEditor 创建富文本编辑器的方法，适用于需要文章发布、评论编辑或任何其他富文本编辑功能的 Web 应用。如果大家运行时出现问题或代码有什么不懂的地方都可以随时评论留言或联系博主。也可以去看wangEditor官方文档。

        还多请各位小伙伴多多点赞支持，你们的支持是我最大的动力。

博主VX：xiahuahua49

谢谢各位的支持~~