TinyMCE mangles URLs by default

Posted by james on Sept. 22, 2009

I've been using TinyMCE as a WYSIWYG HTML editor for a while. I like it; it's light, relatively easy to use, and capable enough for most things. I really wish they had better image uploading support, but besides that, I've had little to complain about.

However, I ran into a problem that really frustrated me. I'd edit a mailing list email, add some links to a webpage, preview everything to make sure it works, then send it out. And then all the URLs in the email would be bad. They'd like to something like "../../some_link" instead of "http://www.server.com/some_link". This is not a big deal on a blog post where you can re-edit to your hearts content, but is a big problem when you're sending out emails. Obviously TinyMCE was mangling these URLs, but why?

Turns out that by default, TinyMCE is set to mangle all URLs, and it does this in a very unintelligent way. It converts a full URL into a relative one - relative to the script path. However, all of my sites put scripts in a separate /scripts folder (and so do many sites I've come across), so this all but guarantees that most URLs will be invalid by default.

To fix this:
relative_urls: false,
remove_script_host: false

This uses jQuery, but the TinyMCE options are what's important here. The "relative_urls" turns off the absolute to relative conversion. And the "remove_script_host" turns off the URL mangling for the first part of the full URL.

This fixes the immediate problem, but it also shows a flaw in TinyMCE. Any program's default settings to default to safe, understandable operation. In this case, the default is to mangle URLs in a way that almost guarantees they'll be wrong. While reading the manual may have helped in this case, probably not: the setting doesn't have "url" in it, like the other two url-related settings (convert_urls being the other one), and it's not obvious that "relative_urls" or "convert_urls" do nothing to fix this unless you also happen upon "remove_script_host" as well. I only happened to stumble on an example that showed all these options being used.

TinyMCE is not a bad script, and it is very helpful. But it is also confusing in this case, and it seems like some design decisions could improve things (change the defaults to be safe instead of "convenient", change the parameter names to be more consistent, add notes in the documentation for each option to show *exactly* what they do).