wangEditor5添加键盘事件/实现定时保存功能

1、问题概述？​​​​​​​

主要内容：添加键盘事件、实现定时保存功能。

wangEditor5轻便好用，但是在很多的功能上还有待完善，毕竟个人精力有限。

为什么要添加这个键盘事件呢？因为我在实现当内容发生变化，就出发自动修改功能的时候，发现onChange函数，只要我们点击一下就会出现，并不是内容修改才触发(不知道是不是我配置问题)，于是我尝试给wangEditor5编辑器添加键盘事件，并实现定时保存功能。

也可实现实现如下功能？

如：当点击Enter键的时候实现存储或主动修改功能？

 

如：点击任意数字或字母键盘的时候，出现修改功能。

2、添加键盘事件实现方式

2.1、自动添加或修改的重要思想

重点：键盘事件及自动保存功能一个非常重要的小技巧？

就是需要设置一个公共的状态值，status,

如果status=-1表示值没变化，不需要修改或添加。

如果status=1表示值变化，需要修改或自动添加。

我直接在页面添加了一个隐藏域status,如下代码：

//如果status=-1表示内容没变，如果status=1表示内容修改
<input type="hidden" id="status" value="-1">
//如果id=-1表示添加功能，如果id!=-1表示修改功能
<input type="hidden" id="id" value="-1">

2.2、创建键盘事件函数

在页面加载的时候，自动加载就行了

以下的各种条件，可以根据自己实际的需求和情况进行设定。

function InitKeyEvent(layer){// 添加键盘按下事件监听$("#editor-text-area").on('keydown', function(event) {console.log('Key pressed:', event.key);if (event.key === 'Enter') {//获取文章状态值var status=$("#status").val();var id=$("#articleid").val();//1表示变化if(id=-1){saveData();}if(status==1&&id!=-1){updateDate();} //修改或添加后，重置status状态值$("#status").val(-1);}//如果点击了非Enter,上下左右键，执行修改功能。       if(event.key!="Enter"&&event.key!="ArrowUp"&&event.key!="ArrowDown"&&event.key!="ArrowLeft"&&event.key!="ArrowRight"){//获取文章的标题内容var title=$("#title").val();//如果标题不为空就修改状态值//值变化后，定时修改功能就能满足条件，从而自动保存。if (title!=""){$("#status").val(1);}}});
}

2.3、创建定时任务

案例中直接使用javaScript创建定时任务，也可以使用如springboot等工具实现定时任务的创建。

function onEvent(){//每两分钟执行一次setInterval(function(){var status=$("#status").val();var id=$("#id").val();//1表示变化if (status==1){if(id==-1){var title=$("#articletitle").val();//标题if (title!=""){//加入标题不为空saveDate();}}else{if (status==1){updateDate();}}}}, 120000);}