CODEWITHSUNDEEP
javascripthtmltinymce
user2265529
user2265529

Reputation: 479

TinyMCE: show and hide inline toolbar on demand

I use TinyMCE to edit content. 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. 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.

Please, help me find a way to show and hide the inline editor on demand for different divs.

Upvotes: 1

Views: 4079

Answers (2)

Jijo Paulose
Jijo Paulose

Reputation: 1956

In tinymce, inline mode, I use simply:

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

Upvotes: 1

Susantha
Susantha

Reputation: 1

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

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.

Upvotes: 0

Related Questions