百度编辑器UEditor的内容改变事件，自动保存功能实现方法

百度编辑器UEditor的内容改变事件4V2无知

4V2无知

监听内容改变事件

UE.getEditor('content').addListener('contentChange',function(editor){
        //相关操作});

注：其中content代表你的富文本编辑器的id值4V2无知

4V2无知

回调函数中的参数editor值是事件名称contentchange，基本没有用处。4V2无知

4V2无知

自动保存功能实现方法

var currentNewsId = 0; //记录当前信息的id
var currentContent = ""; //记录当前信息的内容

var autoSaveTimer = null; //自动保存计时器
ueInstanse.addListener('contentChange',function(evtname){
  
  if (autoSaveTimer){
    window.clearTimeout(autoSaveTimer); //如果存在则清除，也就不没到1秒的间隔，内容又发生改变的情况
  }
  autoSaveTimer = window.setTimeout(function () {
        autoSaveContent(); //1秒后执行自动保存方法
    }, 1000);
});

function autoSaveContent(){
  if (!newstext.isReady){
    return; 
  }
  var form = {
    action: "save",
    id: currentNewsId,
    title:$("#title").val(),
    content: newstext.getContent()
  };
  if (form.content == currentContent){
    return; 
  }
  
  $.ajax({
    type: 'POST',
    url: "autosave.php",
    data: form,
    dataType: 'html',
    success: function(data){
      if (data == ''){
          console.log('登录过期');
        return;
      }
      var rlt = JSON.parse(data);
      if (rlt.code == 0 && 'id' in rlt){
        currentContent = form.content;
        console.log("auto save success.");
      }else{
        alert(rlt.code);
      }
    }
  });
}

4V2无知

本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/web/2022-06-15/1242.html

很赞哦！ () 赏 有话说 ()