如何在TinyMCE编辑器中触发页面离开警告？

Question

我最近升级了TinyMCE到一个新版本（4.6.1，不再是最新版本）。我的网站中有几个区域在TinyMCE框被编辑但其所在的表单没有提交时会触发“您确定要离开该网站吗？”的警告。现在，不再触发任何警告。

我尝试了许多解决方案（自动保存插件，autosave_ask_before_unload初始化属性，抛出更改事件），但最接近解决此问题的方法使得无论是否编辑了TinyMCE区域都触发警告。有很多关于如何添加或删除3.x版本的功能的信息，但对于4.x版本的信息较少。

我需要对TinyMCE字段进行更改，以便在不提交表单的情况下离开页面时触发警告，在其他情况下不触发任何警告。

- Autumn Leonard

Answer 1

建议您使用IsDirty TinyMCE函数，该函数可以返回编辑器是否被修改的真/假值。如果用户对内容进行了修改，则认为编辑器已经被“污染”。

代码：

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

这里有一个SO答案建议使用onchange，但是有一与onchange相关的已知问题(它并不总是触发)。 TinyMCE onchange回调文档“强烈建议”优先使用IsDirty，并解释了原因:

我们强烈建议用户使用isDirty方法来确定编辑器内容是否已更改，因为这样更准确，因为它不需要撤消级别/模糊等。

重要的是要注意，出于性能考虑，onchange回调不会在每次按键时触发。始终执行onchange回调只是一种不好的设计实践，并且会浪费用户的CPU。最好在离开页面之前在document onbeforeunload事件中检查isDirty状态。这是自动保存插件的功能方式。使用isDirty方法是跟踪编辑器实例是否已修改或未修改的推荐方法。

- Rachel Gallen

---

注：据我所知，IsDirty是3(.x)版本和4(.x)版本中的公共函数。 - Rachel Gallen

在我甚至触摸编辑器之前，“isDirty（）”就已经返回真了；检查看看我可能还做了什么其他事情导致这种情况。 - Autumn Leonard

Answer 2

了解更多信息。 最佳方法检测用户何时离开网页？

window.addEventListener('beforeunload', function(e) {
  var myPageIsDirty = tinymce.activeEditor.isDirty()
  if(myPageIsDirty) {
    //following two lines will cause the browser to ask the user if they
    //want to leave. The text of this dialog is controlled by the browser.
    e.preventDefault(); //per the standard
    e.returnValue = ''; //required for Chrome
  }
  //else: user is allowed to leave without a warning dialog
});

- Ego Slayer

---

只需添加这个，TinyMCE 5 就能够出色地工作。 - Tieria