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

Question

我最近在 TinyMCE 上升级到新版本（4.6.1，不再是最新版本）。当 TinyMCE 框已被编辑但其所在的表单未提交时，我的网站有几个受影响的区域曾经触发 "Do you want to leave this site?" 警告。现在没有触发警告。

我尝试了很多解决方案（自动保存插件、autosave_ask_before_unload init 属性、抛出更改事件），但我最接近解决这个问题的方法是无论 TinyMCE 是否触发警告区域是否被编辑。关于如何为 3.x 添加或删除此功能的信息很多，但对于 4.x.

的信息较少

我需要更改 TinyMCE 字段，以便在您尝试离开页面而不提交表单时触发警告，而在任何其他情况下都不会触发警告。

Answer 1

建议您使用 IsDirty TinyMCE function

这是一个 returns 一个 true/false 编辑器是否脏的函数。如果用户对内容进行了修改，则编辑者被视为 "dirty"。

代码：

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

有个SO answer here that suggests using onchange, however there is an open bug with onchange (it doesn't always fire).

优先选择TinyMCE docs for the onchange callback"strongly recommend"IsDirty，并说明原因：

We strongly recommend users to utilize the isDirty method to determine if the editor contents were changed or not since this is much more exact because it doesn't need undo levels/blurring, etc.

It is important to note that the onchange callback will not fire on each keystroke due to performance considerations. Executing the onchange callback all the time is just a bad design practice and it wastes the users CPU. It's better to check the isDirty state before leaving the page in a document onbeforeunload event. This is how the autosave plugin functions. The isDirty approach is the recommended way of tracking if an editor instance has been modified or not.

Answer 2

了解更多信息。 Best way to detect when a user leaves a web page?

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

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

How to trigger page leave warning on TinyMCE edit?

html

javascript

tinymce

tinymce-4