TinyMCE : hooking onto the resize event

TinyMCE LogoOut of the box TinyMCE supports a nice set of events which you can trace via the handle_event_callback Callback. Amongst a few you can externally hook onto the mousedown, mouseup, click, keypress, keydown, keyup, etc. events. Very nice, yet I was missing one from the list of supported events: the resize event.

Please note…

Please note that in order to enable resizing, one must use the advanced theme and enable the theme_advanced_resizing setting 😉

Finding a way to hook

Whilst investigating on how I precisely could hook onto the resize event I tried all kinds of stuff (can’t even recall ‘m all … it’s been a while since I actually coded this 😉) yet one thing was certain: the hook had to be placed after TinyMCE got inited. Aha, that rings a bell: init_instance_callback to the rescue!

What to hook on?

Most likely you already know this: After TinyMCE is inited, the editor itself (not the UI) in fact is an iframe. Perfect, as iframe have a resize event! Now, the init_instance_callback function we’re about to define has one parameter passed in: a tinymce.Editor instance. Via the provided getDoc function we can then get access to the iframe.

Placing the hook

As of TinyMCE 3, the internals of it have been totally refactored (check the API: lots of classes 🙂) and contains lots of functionality which you can also find in the infamouse JS libraries (jQuery, Prototype, MooTools, etc.). One of those classes is tinymce.dom.Event by which we can add eventHandlers to given elements via its add method.

The actual code

Given the knowledge above, it’s really easy to hook onto the resize event:

  1. Adjust your tinyMCE.init so that the init_instance_callback function gets called
    [js]tinyMCE.init({

    init_instance_callback : “myCustomInitInstance”
    });[/js]
  2. In your defined init_instance_callback function, hook onto the instance’s iframe resize event via tinymce.dom.Event
    [js]function myInitInstance(inst) {
    tinymce.dom.Event.add(inst.getWin(), ‘resize’, function(e) {
    // Do your thing here 🙂
    });
    }[/js]
  3. That’s it; Happy coding!

Make a donation

It certainly is no obligation but it would most certainly put a smile on my face 😉

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

2 Comments

  1. Hey Bram,

    Thanks a lot, it worked perfectly! BTW; in your example i believe the second function has to be renamed to myCustomInitInstance.

    Regards,

    Jelle

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.