2025年富文本插件（富文本插件vue）

科技前沿 • 2025-05-25 22:19 • 阅读 46

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p>WangEditor 是一款轻量级、简洁的富文本编辑器&#xff0c;支持丰富的自定义功能&#xff0c;使用方便。本文将介绍如何在 Vue 项目中集成 WangEditor&#xff0c;并实现自定义配置及图片上传功能。<br /> 官网&#xff1a;https://www.wangeditor.com/</p>

讯享网

源码放文章末尾 👇

在项目中安装 WangEditor：

讯享网

在 *.vue 文件中，使用和组件来构建富文本编辑器。具体代码如下：

配置属性参数

为编辑器传入 modelValue、minHeight、showToolBar 等属性以实现数据双向绑定，定义了 readonly 属性用于切换编辑模式。

讯享网

自定义工具栏配置

toolbarConfig 用于配置工具栏，excludeKeys 可以隐藏不需要的按钮。

讯享网

编辑器核心配置

主要配置项包括 placeholder、readOnly 和 MENU_CONF。其中 MENU_CONF 配置了自定义图片上传方法 customUpload，便于将图片上传到后端并获取返回的图片地址。

讯享网

双向数据绑定
使用 useVModel 进行双向绑定，实时更新编辑器内容：
const defaultHtml = useVModel(props, ‘modelValue’, emit);
事件监听
通过 handleChange 和 handleCreated 监听编辑器内容变更及初始化事件：

销毁编辑器
在组件销毁时调用 editor.destroy() 及时释放资源：

讯享网

引入 WangEditor 的 CSS 样式文件，并进行样式自定义：

完成上述步骤后，你将在 Vue 项目中拥有一个带工具栏的富文本编辑器。WangEditor 提供了较为简洁的 API 接口，能够很好地满足基本编辑需求，且支持对图片上传、菜单配置等进行高度自定义。
在这里插入图片描述

讯享网

自定义样式

具体效果可登录我的网站体验
https://web.yujky.cn/
租户：体验租户
用户名：cxks
密码： cxks123
在这里插入图片描述

2025年富文本插件（富文本插件vue）

相关推荐