源码放文章末尾 👇
在项目中安装 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
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/39776.html