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

by

The 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.

enter image description here

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment