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编辑器中进行更改时进行检查。这可以通过onChange()事件tinyMCE provides实现，如下所示：

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);

     });
  }
});

Answer 2

我目前正试图了解如何在这方面修复TinyMCE。在TinyMCE之外，当前的跨浏览器解决方案是使用大多数当前浏览器支持的OnTextChange DOM事件。我今天测试它非常适合非键盘右键单击剪切/粘贴/删除以及键盘更改。 textchange事件不需要键盘事件。（注意，它需要在DOM中准备，谷歌jquery.textchange.js插件）。

然而，当TinyMCE包装textarea控件时，它不起作用。我目前正在查看源代码和插件，以了解如何实现此textchange事件。

TinyMCE是脏方法

2 个答案: