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/

点击转义会关闭编辑器，但我有两个问题：（1）编辑器在单击文本时没有返回（2）任何编辑后的文本都没有恢复到原始值

Answer 1

（1）点击文字时编辑器不会返回

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

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

如果你使用第二个选项（我认为它会更简单），代码就像这样（只有与转义按钮相关的部分）：

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编辑

1 个答案: