TinyMCE的isDirty方法

Question

我有一个制卡网站项目。我有一个tinyMCE文本字段和一张卡片的外观。更改tinyMCE编辑器的内容后，我想更新卡的外观以反映新的文本/更改。

TinyMCE带有IsDirty方法：

if (tinyMCE.activeEditor.isDirty())
    alert("You must save your contents.");

我不明白的是，在哪里放置if语句来定期检查它。我了解JS是事件驱动的，因此需要“调用”，我是否每次按键都将其称为？

Answer 1

您可以添加一个全局超时函数，每隔一秒左右（间隔由您决定）检查：

function updateCardIfDirty() {
  if (tinyMCE.isDirty()) {
    // rerender the card
  }
}

setInterval(updateCardIfDirty, 2000); // check every 2 seconds.

更简洁的解决方案可能是每次在 tinyMCE 编辑器中进行更改时进行检查。这可以通过tinyMCE 提供的onChange()事件实现，如下所示：

tinyMCE.init({
  ...
  setup : function(ed) {
     ed.onChange.add(function(ed, l) {
       // rerender the card
     });
  }
});

第一种方法的缺点是它会每 2 秒执行一次，即使他们一个小时没有编辑卡片。第二种方法的缺点是，如果他们在 1 秒内执行 10 次编辑，那么该卡将在该秒内重新渲染 10 次。

所以最后，让我们尝试第三种方法，它可以两全其美，并消除我们提到的两个缺点：

tinyMCE.init({
  ...
  setup : function(ed) {
     ed.onChange.add(function(ed, l) {

       if (timeout) {
          clearTimeout(timeout);
       }

       timeout = setTimeout(function(){ timeout=null; rerenderCard(); }, 1000);

     });
  }
});