TinyMCE：按需显示和隐藏内联工具栏答案

【问题标题】：TinyMCE: show and hide inline toolbar on demandTinyMCE：按需显示和隐藏内联工具栏
【发布时间】：2015-06-06 00:10:41
【问题描述】：

我使用 TinyMCE 编辑内容。我通过以下方式初始化它

<script type="text/javascript">
tinymce.init({
    selector: "div.editable",
    inline: true,
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>

因此，单击具有“可编辑”类的 div 将显示 TinyMCE 内联编辑器。我想通过点击按钮来显示和隐藏它，比如：

<input type="button" value="show inline editor for some div" onclick='tinymce.somediv.show()'>

我准备了一个 jsfiddle 来显示默认行为。

请帮我找到一种方法来根据不同 div 的需要显示和隐藏内联编辑器。

【问题讨论】：

您可以使用 TinyMCE 的“按需加载”。看这里：tinymce.com/tryit/3_x/load_on_demand.php

标签： javascript html tinymce

【解决方案1】：

在tinymce，内联模式下，我简单地使用：

tinymce.EditorManager.activeEditor.getElement().blur();

【讨论】：

【解决方案2】：

我很确定您已经为您的问题找到了答案。由于我很难找到确切的答案，这就是我最后所做的。

我的 TinyMCE 版本 4.0.1

显示：

tinymce.init({
    selector: "div.editable",
    inline: true,
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});

隐藏（仅隐藏内联编辑器）：

$("#some_input_element").trigger("focus");// to remove focus from active editors
for (var i = tinymce.editors.length - 1; i >= 0; i--) {
    if (tinymce.editors[i].inline)
        tinymce.editors[i].remove();
};

在获得焦点的同时删除编辑器会产生意想不到的结果。所以为了安全起见，在进入 for 循环之前，我会关注不同的输入元素。

【讨论】：