How do I hide the TinyMCE Toolbar onBlur without deactivating the Rich Text Editor entirely?
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>
Answer
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).