TinyMCE : hooking onto the resize event

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

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!

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.

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.

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!

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