Update tiny_mce to latest version 4.0.3 (2013-08-08)

Question

On EE 1.12, I would like to update to the latest version of tiny MCE.

This is to make use of some updated plugins (non-editable areas etc)

Seems like it is not just a drop-in replacement.

Once droped in the js folder and I adjusted head.phtml to load the new version, I get js error, and no tiny mce editor :(

<?php if($this->getCanLoadTinyMce()): // TinyMCE is broken when loaded through index.php ?>
<script type="text/javascript" src="<?php echo $this->getJsUrl() ?>tiny_mce_new/tinymce.min.js"></script>
<?php endif; ?>

I am hoping someone has a resource available, or done this before and know how to fix this - no time to dig, on a strict deadline on this project :(

Help appreciated.

Answer 1

Ok, I had to solve this one myself.

Found : http://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x

and from that :

TinyMCE 4.0 has a new way of binding events. Instead of the old dispatcher method it uses the more common "on" and "off" like for example jQuery. It also allows you to bind multiple events and cancel events using the more common preventDefault and stopPropagation. Check the API documentation for a full list of events.

Note: this is a WIP, this does not solve the integration issue of TinyMCE4, but it answers the question, and gets it a step closer. Magento custom modules are broke, and will need further work. I hope to be able to release a module (not soon, I am very busy at the moment) to enable integration.

The following code in the js/mage/adminhtml/wysiwyg/tiny_mce/setup.js makes it work. (changes to event handlers binding). Warning this is editing a core file, and is BAD. This is WIP to be modularized when I figure it all out, so don't go edit your core files if you read this!

setup : function(ed) {
                  ed.on('submit', function(e) {
                    varienGlobalEvents.fireEvent('tinymceSubmit', e);
                  });
                  ed.on('change', function(e) {
                    varienGlobalEvents.fireEvent('tinymceChange', e);
                  });
                  ed.on('paste', function(e) {
                    varienGlobalEvents.fireEvent('tinymcePaste', e);

                  });
                  ed.on('BeforeSetContent', function(e) {
                    varienGlobalEvents.fireEvent('tinymceBeforeSetContent', e);
                  });
                  ed.on('SetContent', function(e) {
                    varienGlobalEvents.fireEvent('tinymceSetContent', e);
                  });
                  ed.on('SaveContent', function(e) {
                    varienGlobalEvents.fireEvent('tinymceSaveContent', e);
                  });
                  ed.on('ExecCommand', function(e) {
                    varienGlobalEvents.fireEvent('tinymceExecCommand', e);
                  });
            }