vue简单封装wangeditor4

最新推荐文章于 2024-07-22 17:43:00 发布

tao-cht

最新推荐文章于 2024-07-22 17:43:00 发布

阅读量806

点赞数

分类专栏：前端文章标签： vue 编辑器 javascript

本文链接：https://blog.csdn.net/weixin_38115427/article/details/113931864

版权

本文介绍了如何在Vue项目中简单封装WangEditor4，包括实现思路和具体代码实现。通过定义组件属性，监听编辑器变化并实现v-model双向绑定，确保组件与编辑器内容同步，同时避免不必要的重复更新。

摘要由CSDN通过智能技术生成

wangeditor v4版本已经发布了，地址：https://doc.wangeditor.com/

抱着尝鲜的态度在新项目中实践，做了一个简单组件封装

实现思路

定义常用属性（height/zIndex/placeholder/focus）；
实现v-model指令；
监听编辑器onchange事件，更新组件value；
watch组件value改变，更新编辑器内容，此处需要注意：在编辑器编辑时，触发onchange事件，更新了组件value值导致watch回调被触发，此时，需判断value与编辑器内容是否相同，相同则不更新编辑器内容；

代码实现

定义常用属性（height/zIndex/placeholder/focus）；

@Prop(String) private readonly value?: string;
  
@Prop(Number) private readonly height?: number;

@Prop(Number) private readonly zIndex?: number;

@Prop(String) private readonly placeholder?: string;

@Prop(Boolean) private readonly focus?: boolean;

在mounted生命周期，创建编辑器实