简体   繁体   English

TinyMCE:按需显示和隐藏嵌入式工具栏

[英]TinyMCE: show and hide inline toolbar on demand

I use TinyMCE to edit content. 我使用TinyMCE编辑内容。 I initialize it in the following way 我用以下方式初始化

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

So, clicking divs with class 'editable' will show the TinyMCE inline editor. 因此,单击类为“ editable”的div将显示TinyMCE内联编辑器。 I want to show and hide it by clicking buttons, something like that : 我想通过单击按钮来显示和隐藏它,就像这样

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

I prepared a jsfiddle that shows the default behavior. 我准备了一个显示默认行为的jsfiddle

Please, help me find a way to show and hide the inline editor on demand for different divs. 请帮我找到一种显示和隐藏内联编辑器的方法,以适应不同的div。

在tinymce内联模式下,我简单地使用:

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

I'm pretty sure you have already found an answer for your question. 我很确定您已经找到问题的答案。 Since it was a bit hard for me to find exact answer, here's what I did at the end. 由于我很难找到确切的答案,所以这就是我最后所做的。

My TinyMCE Version 4.0.1 我的TinyMCE版本4.0.1

to show: 显示:

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"
});

to hide (hide only inline editors): 隐藏(仅隐藏内联编辑器):

$("#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();
};

Removing editor while having focus gives unexpected results. 焦点对准时删除编辑器会产生意外结果。 So to be safe, I focus to a different input element before entering the for loop. 为了安全起见,在进入for循环之前,我将重点放在另一个输入元素上。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM