Display TinyMCE controls only when user edits content

Question

I have a control textareaand I use the TinyMCE library to add content editing features to this textarea.

Initially, when the page loads, there will be no additional formatting controls in the text box. But when the user clicks on the text box, tinyMCE controls must be added to the text box.

I was able to do this using this jQuery code:

$("textarea").focus(function(){
  $(this).tinymce();
});

But the problem starts when I want to hide the control when the user exits the text box. I could not find a way to associate the event handler blurwith this text field, because tinyMCE replaces my text field with an iframe and formatted content inside.

In any case, to show the tinyMCE control only when the user is editing content and hiding it when the user leaves the editing area?

Answer 1

You should $(this).tinymce();only call once (the first time textarea gets focus). The second time you get focus, you have to call

tinyMCE.get(editorid).show();

,

tinyMCE.get(editorid).hide();

, i.e, .

$(document).focus(function(){
  tinyMCE.get(editorid).hide();
});