How do I hide the TinyMCE Toolbar onBlur without deactivating the Rich Text Editor entirely?

4
votes

I am attempting to hide the TinyMCE Toolbar when a user clicks on another page element and leaves the text area (so essentially onBlur). I have found solutions that will Deactivate the Rich Text Editor functionality onBlur, but I need to only hide the toolbar and leave the Rich Text display (rather than plain text with html tags).

Any suggestions would be greatly appreciated...thanks!

This is what I have now: (it uses the external toolbar)

<html>
<head>
<!-- TinyMCE -->
<script type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
    theme_advanced_buttons1 : "fontselect,fontsizeselect,|,bullist,numlist,|,outdent,indent,|,blockquote,image,code,|,fullscreen",
    theme_advanced_buttons2 : "bold,italic,underline,strikethrough,sub,sup,hr,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink",
    theme_advanced_buttons3 : "tablecontrols,|,charmap",
    theme_advanced_toolbar_location : "external",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true
});
</script>

</head>
<body>

<form method="post" action="somepage">
    <br />
    <br />
    <br />
    <br />
    <br />
    <textarea name="content1" id="content1" style="width: 500px;">
        This is some sample <b><u>content</u></b>.
    </textarea>
    <br />
    <br />
    <a href="javascript: void(0);" onclick="tinyMCE.getInstanceById('content1').toolbarElement.style.display = 'none'">Hide Toolbar</a>
</form>

</body>
</html>
3
javascripttinymceonblur

3 Answers

6
votes

The following code pops up the toolbar at focus and hides it when the user clicks somewhere outside the editor. This solution was tested for Safari and Firefox, but should also work for Internet Explorer. 

 tinyMCE.init({
    ...
    oninit : function() {//fires after editor is created
        // make toolbar draggable (not essential for this anwer)
        $(tinyMCE.getInstanceById('content1').toolbarElement).draggable();

        //hide toolbar when loosing focus
        var frame = ...//get hold of iframe element which contains editable region
        if(frame.contentDocument) {
             bindEvent(frame.contentDocument.body,"blur",function() {
                 tinyMCE.getInstanceById('content1').toolbarElement.style.display = 'none';
             });
        } else {
             bindEvent(frame,"blur",function() {
                 tinyMCE.getInstanceById('content1').toolbarElement.style.display = 'none';
        }
    }
  },
  ...
 });

My bindEvent function is as follows: 

 function bindEvent(target, eventName, fun) {
    if (target.addEventListener) {
       target.removeEventListener(eventName, fun, false);
       target.addEventListener(eventName, fun, false);
    } else {
       var name = "on"+eventName;
       target.detachEvent(name);
       target.attachEvent(name, function(){ fun(eventName); });
    }
 }

Hope this helps you (or someone).

1
votes

This should do the job

$('#' + ed.id + '_tbl '+'.mceToolbar').hide();

Alternatively, You could use a layover (a div) with the following class

.layover {
    background: none repeat scroll 0 0 #FFFFFF;
    display: block;
    /*you will need to set this (and the following) parameters so that the tinymce instance will be fully covered*/
    height: 100%; 
    left: 0;
    opacity: 0.6;
    position: fixed;
    top: 0;
    width: 100%;
}
0
votes
tinyMCE.getInstanceById(editorID).toolbarElement.style.display = 'none'