TINYMCE V3 or V4 Show/Hide ToolBar on focus/blur

Question

I'm working with , the version V3 or v4 of Tinymce, I want to do the next actions:

1- On focus Show the toolbar. 2- On blur Hide the toolbar.

I was watching this example: http://sourceforge.net/p/tinymce/plugins/185/, is not bad, but I'm trying to do with events, but did't work.

Somebody knows a good example?

    <!-- TinyMCE -->
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        alert("cargado...");
    });

    tinyMCE.init({

        // General options
        mode: "textareas",
        theme: "advanced",
        plugins: "toggletoolbars, pdw, safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount",
        toggletoolbars_status: "off",
        // Theme options
        theme_advanced_buttons1: "pdw_toggle, save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: true,

        // PDW Toggle Toolbars settings
        pdw_toggle_on: 0,
        pdw_toggle_toolbars: "2,3,4",

        // Example content CSS (should be your site CSS)
        content_css: "css/content.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url: "lists/template_list.js",
        external_link_list_url: "lists/link_list.js",
        external_image_list_url: "lists/image_list.js",
        media_external_list_url: "lists/media_list.js",

        // Replace values for the template plugin
        template_replace_values: {
            username: "Some User",
            staffid: "991234"
        },

        setup: function (ed) {
            ed.onBlur.add(function (ed, l) {
                tinyMCE.getInstanceById(editorID).toolbarElement.style.display = 'none';
            });
        }
    });
    </script>
<!-- /TinyMCE -->

Stack Overflow is for specific questions and problems, not general questions about how to do something. Look up a tutorial, and then ask us if a particular thing doesn't work. — Vitruvie, Feb 09 '14 at 22:55
@Saposhiente - I disagree with the downvote. The question is clear enough.OP has posted the code he tried. — afzalulh, Feb 09 '14 at 23:47
@afzalulh Whenever someone says "didn't work" without explaining what exactly they did or what happened, and then asks for full code, those are both big red flags for me. Perhaps it was clear enough after all, but this seemed like a standard sort of ambiguous question when I popped by it in the review queue. — Vitruvie, Feb 09 '14 at 23:54
The code is enough to show "Exactly" what he "did". Don't know what you mean by "full code", I can't see OP is asking it anywhere either. Suggesting a better way to ask a question to a newbie never hurts. I would probably do that. — afzalulh, Feb 10 '14 at 00:08

score 8 · Accepted Answer · answered Feb 11 '14 at 08:09

Thanks a lot afzalulh for your help, now works, I have pasted the code....if is usefull for another person.

But.. I have a problem with this solution, I use this editor for load text from the database in the textbox ASP.net component, when I load the text, the text not appear, but when I select one Tiny editor on focus and I insert a space inside the text appear, I have not a errors, I don't know if I need to add another configuration parameter..?

<head runat="server">
<title>Show/Hide ToolBar on Focus/Blur Event - TinyMCE 4.0.16 jQuery package </title>
<!-- Loading the jQuery Library -->
<script type="text/javascript" src="Javascript/tinymce/js/tinymce/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<!-- Loading jQuery TinyMCE -->
<script type="text/javascript" src="Javascript/tinymce/js/tinymce/jquery.tinymce.min.js"></script>
<!-- Loading TinyMCE -->
<script type="text/javascript" src="Javascript/tinymce/js/tinymce/tinymce.min.js"></script>


<script type="text/javascript">
tinymce.init({
    selector: ".editorTextarea",
    theme: "modern",
    plugins: "pagebreak table save charmap media contextmenu paste directionality noneditable visualchars nonbreaking spellchecker template",
    toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify fontselect fontsizeselect | bullist numlist | undo redo | forecolor backcolor | charmap nonbreaking",

    contextmenu: "cut copy paste",
    menubar: false,
    statusbar: false,
    toolbar_item_size: "small",

    setup: function (theEditor) {
        theEditor.on('focus', function () {
            $(this.contentAreaContainer.parentElement).find("div.mce-toolbar-grp").show();
        });
        theEditor.on('blur', function () {
            $(this.contentAreaContainer.parentElement).find("div.mce-toolbar-grp").hide();
        });
        theEditor.on("init", function () {
            $(this.contentAreaContainer.parentElement).find("div.mce-toolbar-grp").hide();
        });
    }
});

<asp:TextBox ID="Block1_Text2_D" runat="server" Rows="3" TextMode="MultiLine" Width="400px" CssClass="editorTextarea"></asp:TextBox>

Here more or less my problem It seems is a general problem..: http://forums.mozillazine.org/viewtopic.php?f=9&t=2482661 — reizintolo, Feb 11 '14 at 08:18
Refering to the answer given here http://stackoverflow.com/a/21453442/561429 Shouldn't the jquery.tinymce.min.js be loaded after the tinymce.min.js? — Rohan210, Jun 24 '15 at 13:19

score 3 · Answer 2 · answered Feb 09 '14 at 23:45

3

It should be something like this:

 setup: function (ed) {
        ed.on('focus', function () {
            $(this.contentAreaContainer.parentElement).find("div.mce-toolbar-grp").show();
        });
        ed.on('blur', function () {
            $(this.contentAreaContainer.parentElement).find("div.mce-toolbar-grp").hide();
        });
        ed.on("init", function() {
            $(this.contentAreaContainer.parentElement).find("div.mce-toolbar-grp").hide();
        });
    }

As suggested here.

answered Feb 09 '14 at 23:45

afzalulh

7,925
2
26
37

Thanks,now I have a problem with Explorer 8, only in this browser, I have not a error, only I have strange behaviour with the text, I need to add a space inside the textbox for make that this works, Do you have some idea what happend I spent all day trying to find a solution with several attempts – reizintolo Feb 11 '14 at 17:59

TINYMCE V3 or V4 Show/Hide ToolBar on focus/blur

2 Answers2

Linked