Question

我使用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的内联编辑器。

Answer 1

在tinymce，inline模式中，我简单地使用：

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

Answer 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循环之前将注意力集中在一个不同的输入元素上。

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

2 个答案: