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.

Answer 1

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...
      });
   }
});