TinyMCE Upgrade

Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable.

It has been replaced by lib/editor/tinymce/readme_moodle.tx in cvs.

Generic information

Starting in Moodle 2.0, TinyMCE is the default html editor.

When a new version of TinyMCE comes out, a few steps need to be taken to upgrade the version that's distributed with Moodle.

This document supposes that you are on a unix-like system, can understand a bit of shellscripting, use patch, diff, cvs and other related utilities. You also need to have Java installed to be able to use the javascript compressor (unless you have a different compressor than YUI Compressor).

All Moodle-specific changes to TinyMCE must be explained in /lib/editor/tinymce/jscripts/readme_moodle.txt, in CVS.

So, here it goes, when a new version of TinyMCE comes out...

Upgrading TinyMCE

• Open a terminal and go in the /lib/editor/tinymce/jscripts folder:

mathieu@temlaz:~$ cd /home/mathieu/workspace/head/lib/editor/tinymce/jscripts/

• Copy (backup) tiny_mce to tiny_mce_old, remove the old files (but keep the CVS folders):

mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts$ cp -Ra tiny_mce tiny_mce_old
mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts$ cd tiny_mce
mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts/tiny_mce$ for i in `find . \( \! -path "*/CVS" \) -type d`; do rm $i/*; done;

• Go to the TinyMCE website and download the latest version (the normal version, NOT the development version). At the same time, have a look to see the current version of the spellchecker.
• Go back to your terminal and unzip the archive in /lib/editor/tinymce/jscripts and copy the new files - note the underscore is important in these names:

mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts/tiny_mce$ cd ..
mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts$ unzip ~/downloads/tinymce_3_0_9.zip
mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts$ cp -Ra tinymce3201/jscripts/tiny_mce .

• Change to the new folder, do a cvs diff to see what files are missing:

mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts$ cd tiny_mce
mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts/tiny_mce$ cvs -q diff > ../t

• Copy the missing files (see readme_moodle.txt in cvs):

mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts/tiny_mce/plugins$ cp -R ../../tiny_mce_old/plugins/dragmath/* dragmath/
mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts/tiny_mce/plugins$ cp -R ../../tiny_mce_old/plugins/emoticons/* emoticons/
mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts/tiny_mce/plugins$ cp -R ../../tiny_mce_old/plugins/moodlenolink/* moodlenolink/

• Have a look at the 'changelog' file in the spellchecker folder to see if the spellchecker's version has changed (you remembered to have a look at the latest version of the spellchecker when you downloaded TinyMCE didn't you?). If there's a new version available, you should probably use it (but have a look at the documentation, in case there's any configuration change that need to be done as well). If the version is still the same:

mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts/tiny_mce/plugins$ cp -R ../../tiny_mce_old/plugins/spellchecker/* spellchecker/

• You will need to figure out if the rest of the changes are files that can be deleted, or need to be added, etc. The idea is to keep the files in Moodle as close as possible to the files distributed by Moxiecode. Call 'cvs add' and 'cvs rm' accordingly, but don't commit anything right now though - let's wait until we can test and make sure that it's all good.
• Apply the patch to use the strings from Moodle:

mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts/tiny_mce/plugins$ cd ..
mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts/tiny_mce$ patch -p0 < ../patch-tinymce_strings.txt

• Unless it is your lucky day and it applies cleanly, you'll need to apply (at least part of the) the patch manually. If this is the case, you should extract a new patch (note the use of '>>' on the second call):

mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts/tiny_mce$ diff -u ../tinymce3201/jscripts/tiny_mce/tiny_mce_src.js tiny_mce_src.js > ../patch-tinymce_strings.txt
mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts/tiny_mce$ diff -u ../tinymce3201/jscripts/tiny_mce/tiny_mce_popup.js tiny_mce_popup.js >> ../patch-tinymce_strings.txt

• Then, you need to recompress TinyMCE. You can probably use any javascript compressor - but if you don't have any, visit to the YUI Compressor home page and download the latest version and uncompress.. I would open a new terminal and do this like:

mathieu@temlaz:~$ cd workspace
mathieu@temlaz:~/workspace$ wget http://www.julienlecomte.net/yuicompressor/yuicompressor-2.3.6.zip
mathieu@temlaz:~/workspace$ unzip yuicompressor-2.3.6.zip

• Then, going back to the previous terminal... recompress:

mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts/tiny_mce$ java -jar ~/workspace/yuicompressor-2.3.6/build/yuicompressor-2.3.6.jar tiny_mce_src.js -o tiny_mce.js

• Test... Load your browser, empty the case, force-reload a page where the editor is used, make sure that it's working as it should (possible problems: language strings, Moodle-specific plugins and theme integration):
• If everything works fine, commit the changes to cvs. Make sure you've correctly done all the "cvs rm" and "cvs add", if necessary:

mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts/tiny_mce$ cd ..
mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts$ cvs ci -m 'MDL-14739 Upgrade to TinyMCE version X.Y.Z' tiny_mce
mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts$ cvs ci -m 'MDL-14739 New patch to use Moodle langstrings in TinyMCE' patch-tinymce_strings.txt

• Cleanup:

mathieu@temlaz:~/workspace/head/lib/editor/tinymce/jscripts$ rm -rf tiny_mce_old tinymce3201

Upgrading the language files

Note #1: New strings are imported into translation packs, but old strings are not updated. It's planned to make a script that will make it possible to send the translations back to Moxiecode, but the script hasn't been written yet.

Note #2: It's safe to suppose that you can't read every language even if you find yourself updating the language packs. This being said, it's good to have a look at as much file as possible to make sure that the encodings "look right" (ie, that the Chinese file contains Chinese character, that the Russian file contains cyrillic, etc.). A good test is to have a look at Arabic (it's right-to-left), Chinese (it's multibyte) French (it's got accents) and a few others (your pick - random spot checking is good). Doing a diff with old files can help find out changes that shouldn't be there.

• Download all the language packs from TinyMCE's language download page (you need to manually check all checkboxes).
• Unpack the archive:

mathieu@temlaz:~$ cd workspace 
mathieu@temlaz:~/workspace$ mkdir tinymce_langs && cd tinymce_langs
mathieu@temlaz:~/workspace/tinymce_langs$ unzip /home/mathieu/downloads/tinymce_lang_pack.zip
mathieu@temlaz:~/workspace/tinymce_langs$ cd ..

• Download the Moodle lang repository:

mathieu@temlaz:~/workspace$ cvs -z3 -d:ext:myusername@cvs.moodle.org:/cvsroot/moodle co lang

• Edit the import script /lib/editor/tinymce/create_langfiles.php and adjust the paths to suite your setup.
• Run the import script once:

mathieu@temlaz:~/workspace$ cd head/lib/editor/tinymce
mathieu@temlaz:~/workspace/head/lib/editor/tinymce$ ./create_langfiles.php

• Watch for messages like "xx is not available in Moodle - skipped". As some language codes are different somewhat, between Moodle and TinyMCE, you must go back to the language page of TinyMCE and compare these "missing" codes with those used in Moodle. If you find codes that should match (like "nb" in TinyMCE is mapped to "no" in Moodle), you must edit create_langfiles.php once more, modifying the array "langmatches", adding a mapping.
• Run the import script again, twice (must run twice to make sure the script eval() all the newly created files):

mathieu@temlaz:~/workspace/head/lib/editor/tinymce$ ./create_langfiles.php
mathieu@temlaz:~/workspace/head/lib/editor/tinymce$ ./create_langfiles.php

• Make sure, in the previous output, that there are no PHP parse errors. This would indicate an error in the generated language files, which would mean the import script need to be adjusted. Don't commit language files with errors - it would break Moodle for every user of that language! See note #2 above, about testing information.
• If everything is fine, you can commit the language files:

mathieu@temlaz:~$ cd ~/workspace/lang
mathieu@temlaz:~/workspace/lang$ cvs ci -m "MDL-15688: new version of the language files" `find . -name "*tinymce.php"`
mathieu@temlaz:~/workspace/lang$ cd ../head
mathieu@temlaz:~/workspace/head$ cvs ci -m "MDL-15688: new version of the language files" lang/en_utf8/tinymce.php