Everyone knows TinyMCE, FCKeditor and friends (is Kupu still alive?), plus their commercial counterparts (as a matter of fact the TinyMCE is a default built-in editor for the WordPress). During past few days I had to pick one of them to be integrated as a WYSIWYG component in a bigger project I’ve been recently working on. At the beginning my candidates list contained 4 entries:
In the past I’ve been working with the first two, as for the other ones, it was/is jQuery which made me check if there are any new players built on top of this excellent library. And especially when I chose the jQuery as being the core js library for the whole project.
I gave a try to jwysiwyg and WYMEditor then - and I turned them down. They are described as simple and I like simple solutions - but in this particular context they are too simple and thus inappropriate. At least I tried - and will keep eye on them as I’m sure the functionality will be evolving (and hopefully in the right direction).
Two left, I tried with TinyMCE first. A short hesitation - should I pick the stable 2.1.x one or a development 3.x version? I’m a coder, so the answer lies in the code itself - downloaded both bundles, checked the code and my initial impression about the API was that the most recent version was the way to go. Bugs ? Moxiecode and the community are working on them, most of the plugins have been ported to the new API - let’s play with this one!
So I did, and I soon discovered an annoying thing - the nature of the project suggests that hyperlinks will be a frequently inserted element by the users. What should I do in order to insert a link in TinyMCE (and FCKEditor too) ?
- type in some text (will become a link label)
- select it
- click on the ‘anchor’ icon on the toolbar, firing the popup (or inline-popup, if the inlinepopups plugin is loaded),
- type-in the URL, review the label, possibly add extra attributes
Does it sound simple? In a way - yes, but… wouldn’t it be better, if the editor behaved more like the (in)famous MS Word? I type some text in, as soon as it resembles the hyperlink, it becomes one? So if I enter some URL - or paste some content which contains one or more URLs - they become hyperlinks automatically. No need to select and click - actually if I want to customize them - I can still use the anchor icon and tune them up. I can, I don’t have to, if all I want is to have URLs which will be saved as the hyperlinks. A ‘good enough’ default behavior is what I expect from a good interface, without using buzzwords like usability etc.
(Sidenote: Internet Explorer does underline the URL-like elements automatically - Firefox and Opera don’t though. And of course it is not about visual appearance only, it is about - technically speaking - converting selected parts of DOM text nodes into actual anchor elements)
And then - pushing things a bit more - wouldn’t it be yet better, if the editor could check whether the inserted / existing hyperlinks are reachable? With a little help of that nifty buzz-technology whose name starts with ‘A’, should be a simple stuff.
That was my semi-spec - I sat down and produced a plugin which I named autolink, which does exactly what I wanted. If you want to check it out, you can take a look at this sandbox page, containing a small demo. The page source code shows how to use the plugin too; right now I have not written too much documentation - if the plugin turns out to be useful for more people, I will be happy to exchange both implementation and usage thoughts.
If you can take a quick look into the code itself, this is the link to the actual js bundle.
As usual, apart from the results itself, it was interesting to discover / play with and solve browser incompatibilities - especially if it comes to the ‘Range object’ implementation. And finally I must admit that TinyMCE is some really very very good piece of code, its API, architecture and functionality, which comes with the editor itself (clases like DOM manipulation object, implementation of AJAX) make it a fully-functional javascript library/framework. From the outside - it looks like a WYSIWYG widget. But there is more to it - and tiny_mce_src.js shows why.
Getting back to evaluation task - it turns out it was not a real feature comparison - I did take a look at the FCKEditor API, and I still like TinyMCE more, but that’s very subjective. To be 99% sure, I’d have to implement the same thing in FCK - but if I found a tool which is good and can be customized within a matter of minutes or hours (it took me about 10 hours to implement the whole thing) - I guess it’s time to proceed with the actual target project itself.