Add a close button to tinyMCE fullscreen

Question

I want to add a close full screen option to tinyMCE editor. Sometimes users don't know that they have to click "fullscreen" icon from the toolbar to close the fullscreen mode. so in the plug in I've added this:

$('#mce_fullscreen_container').click(function (e) {
    e.stopPropagation();
    tinyMCE.activeEditor.execCommand('mceFullScreen');
});

However, this is also called when the user clicks inside the wysiwyg area. mce_fullscreen_container is the gray area around the wysiwyg and I want it so that when clicked outside the wysiwyg editor itself the fullscreen mode will close.

I've tried applying .not("#mce_fullscreen_container") which is inside the container without any luck.

Have you tried looking at the code from the 'fullscreen' button of tinymce? if that button closes the fullscreen meybe you could re-use that code into your own 'close fullscreen' — T23
that part is working. I got it closing; HOWEVER it also closes the fullscreen mode when clicking on the BOLD/ITALIC or other buttons of the wysiwyg window. And I want it to close ONLY when clicking outside the wysiwyg area-meaning the gray area around it "mce_fullscreen_container". For some reason it propagates ??? — ShaneKm
Hmm, you say "mce_fullsreen_container" is the gray, but in my tiny_mce instante the div with the id "mce_ful.." is the entire editor 'windows', meaning the entire toolbar and the editor. That would explain the behaviour, you are having — T23
ok, so how would i get the editor to close full screen when clicking outside it? — ShaneKm
You mean on the "gray area"? There dosen't seems to be an especific ID for the gray area, only a class .mceToolbar mceLeft mceFirst mceLast, you could try that one, but probably won't work. The only way is probably adding yourself an ID to that div, and using that id. OR since inside that Div there are only <tables> for the icons you could use jquery to select that element without any <tables> taking out the icons — T23

Cymen Cymen · Accepted Answer · 2012-01-12T17:16:39

The variable named e is the click event. Check the target of the click event and based on that run tinyMCE.activeEditor.execCommand('mceFullScreen'); if appropriate. Fingers crossed that works as I have no way to test it at the moment.

For more advanced TinyMCE programming, look at the setup configuration option which can take a function named that you can use to configure the editor for programmatic events. It's very useful if you need to do multiple things.

http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onClick

The example is useful in your context as it may be a cleaner way of getting TinyMCE to do what you want:

// Adds an observer to the onClick event using tinyMCE.init
tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onClick.add(function(ed, e) {
          console.debug('Editor was clicked: ' + e.target.nodeName);
          // check target here to see if it is your close button and if so...
      });
   }
});

Add a close button to tinyMCE fullscreen

1 Answers