TinyMCE: packaging all the files instead of dynamically loading them... possible?

Question

I'm trying to get TinyMCE to work. I've tried it using the normal method of including tiny_mce.js and then using tinymce.init(...) and it works. I then tried tiny_mce.gzip.js + php compressor and it worked but it was really slow.

Now I already package up my CSS and JS files into one of each with all my files concatenated together. In the case of Javascript they're also minified.

In both cases they're versioned with a timestamp of one of the files so I have URLs like:

/script/script.1233454569.js

which redirects to a PHP file that either serves a cached version or builds the cached version (if necessary) and serves it. It adds expires headers and does gzip compression and basically works well.

I want to fit tiny mce into this mechanism but it's proving painful. Order seems to matter. Currently I have:

• tiny_mce.js
• myscript.js
• default_editor.js (from the simple theme)
• en.js (ditto)

but it's coming up with "u is undefined" for which I could find no suitable answer on google. This is really irritating. Has anyone any experience with this?

Are any other editors more suitable for packaging like I described above rather than forcing their own schemes on you (which annoys me no end)?

Answer 1

I tried to do the exact same thing and spent far too much time trying. In the end, I settled on using the GZip compressor provided by TinyMCE and concentrated on combining the CSS files and images for what I needed. The problem is that TinyMCE is massive, it dynamically loads the files it needs, and it doesn't make use of an existing JavaScript library, so it ends up replicating a lot of the same code if you are already using any sort of library. FCKEditor was the only other editor I felt had the same features and browser compatibility, but it didn't look like it was going to be any easier in terms of integrating into my caching scheme (which sounds similar to yours) and I think the licensing made it a non-choice for me. You can look at a list of editors available here, but those were the two I felt were the best from that list. In the end, I decided to go with TinyMCE and added making a WYSIWYG editor for MooTools onto my to-do list since that's the JavaScript framework I most often use.

If you were to hack at it, I would suggest figuring out every script that your specific implementation of TinyMCE needs, combine them in order, and then isolate and comment out the code that loads each file. If you're brave, you could then try packing the combined file as well. If you do get it to work, I'd love to know.

Answer 2

I've also tried concatenating TinyMCE into one minimised script, here's what I did to get it to work:

in tiny_mce_src.js change this line...

if (n.src && /tiny_mce(|_dev|_src|_gzip|_jquery|_prototype).js/.test(n.src)) {

to be either...

if (n.src && /YourFullScriptName.js/.test(n.src)) {

or even just a part of the script name...

if (n.src && /ullScriptNa/.test(n.src)) {

It's that line which works out the baseUrl so it can load all the other files that TinyMCE needs. The thing is, because of the license we can't do this. I did have some hope by adding this before the concatenated tiny_mce.js file...

var tinyMCEPreInit = {base : 'tinymce/jscripts/tiny_mce/'};

following Spocke's advice, but I can't seem to get that to work either. The only other thing I can think of, since we're using Prototype, is to dynamically load either the tiny_mce.js or the tiny_mce_gzip.js script, then initialize the text area(s) we want from there. But I'm far from finished getting that to work.

Hope this helps,

Cheers,

DJDaveMark

Answer 3

I started up the Gzip Compressor and linked myself with Fiddler in the Rendering Process.

Basically this what arrived in the Browser i catched up and packed it in an own file.

Dirty but working