使用转义键取消内联 tinyMCE 编辑

Question

我希望用户能够使用转义键以内联模式中止 tinyMCE 编辑器中的任何更改。这是 HTML:

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

和脚本：

tinymce.init({
  selector: '#tinymce',
  inline: true,
  setup: function (editor) {
    editor.on('keydown', ((e) => {
      var tinyMceEditor = tinyMCE.get(e.target.id);

      if (e.keyCode === 27) { // escape
        // This will hide the editor but it won't come back when trying to re-edit
        tinyMceEditor.hide();
      }
    }));
  }
});

这也是一个 jsfiddle：http://jsfiddle.net/kfnyqufm/

点击 escape 会像我想要的那样关闭编辑器，但有两个问题：(1) 单击文本时编辑器不会 return (2) 任何编辑的文本都不会恢复到原始值

Answer 1

(1) 编辑器在点击文本时没有return

发生这种情况是因为在按下 esc 时您完全隐藏了编辑器，并且不再显示它。你有（至少）两个选项来解决这个问题：

当 #tinymce div 再次获得焦点时显示编辑器；或
当按下 esc 时触发 #tinymce 上的 blur() 方法（这将自动隐藏编辑器，再次单击它会返回)

如果你选择第二个选项（我认为它会更简单），代码将是这样的（只有与退出按钮相关的部分）：

if (e.keyCode === 27) { // escape
    document.getElementById("tinymce").blur();
}

您也可以在 this version of your JSFiddle 上看到它。

(2) 任何编辑的文本都不会恢复为原始值

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

当 #tinymce div 获得焦点时：将内部 HTML 保存到 JavaScript 变量中（或 localStorage 或 sessionStorage).
当按下退出键时：将保存的值恢复为#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;
}

您可以看到它在 this version of your JSFiddle 上完全正常工作。

使用转义键取消内联 tinyMCE 编辑

Use escape key to cancel inline tinyMCE edit

javascript

tinymce

tinymce-4