Javascript – TinyMCE: packaging all the files instead of dynamically loading them… possible

javascriptphptinymce

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)?

Best Solution

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.