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

微wx笑 2022-06-15【网页网站】148 2 0关键字：

百度编辑器UEditor的内容改变事件

监听内容改变事件
自动保存功能实现方法

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

4V2无知

监听内容改变事件

1 2	`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);
      }
    }
  });
}