Javascript 使用escape键取消内联tinyMCE编辑

我希望用户能够在内联模式下使用escape键中止tinyMCE编辑器中的任何更改。以下是HTML：

<div id="tinymce">
  <p>Foo Foo Foo</p>
</div>

它也是一个JSFIDLE：

点击escape会像我所希望的那样关闭编辑器，但有两个问题：（1）单击文本时编辑器不会返回（2）任何编辑的文本都不会还原为原始值（1）单击文本时编辑器不会返回

之所以会出现这种情况，是因为在按下esc键时完全隐藏了编辑器，而不再显示它。您有（至少）两个选项来解决此问题：

当

#tinymce

div再次获得焦点时显示编辑器；或

当按下esc键时，触发

#tinymce

上的

blur（）

方法（这将自动隐藏编辑器，再次单击时它将返回）

如果使用第二个选项（我认为更简单），代码如下（仅与escape按钮相关的部分）：

你也可以在电视上看到它

（2）任何编辑的文本都不会还原为原始值

这有点棘手（但仍然很简单），因为如果按下esc，您需要跟踪旧值并恢复。这样做的逻辑是：

• 当

  #tinymce

  div获得焦点时：将内部HTML保存到JavaScript变量中（或保存在

  localStorage

  或

  sessionStorage

  中）
• 按escape键时：将保存的值还原为

  #tinymce

  的内部HTML

用于存储旧值的代码如下所示：

// define a variable to store the old value
var old_value = "";

// save the old value when #tinymce gets focus
document.getElementById("tinymce").addEventListener("focus", function() {
  old_value = document.getElementById("tinymce").innerHTML;
}, false);

然后，当按下esc时，还需要恢复旧值：

if (e.keyCode === 27) { // escape
    // blur the tinymce div and restore the old value
    document.getElementById("tinymce").blur();
    document.getElementById("tinymce").innerHTML = old_value;
}

---

您可以看到它正在全面工作。

非常漂亮。非常感谢。

// define a variable to store the old value
var old_value = "";

// save the old value when #tinymce gets focus
document.getElementById("tinymce").addEventListener("focus", function() {
  old_value = document.getElementById("tinymce").innerHTML;
}, false);

if (e.keyCode === 27) { // escape
    // blur the tinymce div and restore the old value
    document.getElementById("tinymce").blur();
    document.getElementById("tinymce").innerHTML = old_value;
}