This is a continuation in my series on low bandwidth development.
The almighty WYSIWYG. It’s a tool that makes life on the net a great deal easier for most everyone. Those of us who are web developers rain scorn down upon these systems, but it’s awfully arrogant of my coding brethren to do that as we live and eat code all day long. For those that don’t, it is a massive pain and even a obstacle to working on the web if one has to type in all the direct HTML code.
Don’t get me wrong, I’m completely against a WYSIWYG for overall web development. What DreamWeaver does when it creates code for a site is criminal. But, when it’s the case that someone needs to write something in a text field on a website (like an article or a comment), there is a definite need for this tool as the web thrives on links. If people don’t link, then there isn’t much of a web, and I think that many people don’t link because of the need to use HTML code.
Working the WYSIWYG
About four years ago, I was an IT Manager for a publishing company and one of my direct reports was working on setting up a WYSIWYG for an internal website to edit articles for online publication. He came back to me a week later and said, “Well, I’ve got one in place. It’s pretty decent, although it only works in Firefox, not Explorer, and completely heaves on itself in Safari…” I shook my head sadly as we had to deploy it like that because those were ugly times, but they have since changed a great deal. These days the WYSIWYG of choice is TinyMCE. Wickedly powerful and full of every option in the world to obfuscate direct HTML coding from the end user, it is by and large, the choice of many.
There are two glaring issues with TinyMCE. One is that you might very well not need all the power that it packs (think of driving a Ferrari in rush hour traffic.) The second and much larger issue is that in its full state, it’s a whopping 320kb! Minified, it drops to 175kb and if you have the ability to compress it, you can get it to about 60kb. And this is before adding in images and styles, which will add another 10-20kb depending on how you want it to look.
So, for the purposes of creating a light, quick to download site, TinyMCE is simply not going to work. This has been noted by a great many people who have set out to create alternatives that, while having less options, are most likely easier to implement and considerably lighter to download. As I’ve been working to improve the WYSIWYG editing abilities on Maneno, I’ve been working through a number of these and following are my thoughts on how some of them implement.
The only downside is that it is indeed a very basic editor and it doesn’t hide the HTML code, it just inserts it automatically. It’s mainly for these reasons that I’m shifting away from it as while this system works nicely for me, it isn’t so great for the intended audience, who are those folks that would much rather not deal with code.
Also, for the MooTools library, there is MooRTE, but I haven’t really spent enough time with it to give feedback other than to say it’s there and give it a go if you’ve got the time.
I tried this editor out briefly. It has promise and is a good deal smaller than TinyMCE, but the problem is that it’s still 76kb when minified. It’s just too big to be used on a low bandwidth site. It also requires jQuery, which while a very nice library, will increase your download footprint by 20kb by having it around.
I’ve been moving a lot of things I work on over to use jQuery. The reasons behind this are the topic of a much larger and much geekier article than I think most people would want to read right now. But in doing this, I was looking around for an editor that would take advantage of the library. I thought that jwysiwyg would be just the thing. It’s quite light, simple, and seems like a good tool despite only being at version 0.5.
Turns out, there are many problems with this system. If you just want to plunk it in to whatever you’re using, it should be somewhat okay. But the code hasn’t had an update in almost a year and requires a number of hacks to work with Explorer 8. Also, modifying it has problems and functions such as ordered and unordered lists just don’t work well.
I’m not sure what’s going on with this project, but it doesn’t seem to be in a good state at the moment. This is a shame as the intentions behind it are quite solid and something I would like to encourage the developers to continue to work on if they have the time.
At the moment, this is my choice. You can squeeze out a very lean version of it if the download page works well for you. Unfortunately to get it to work well, you need to customize your download, get it in the full (not the compressed version) and then use something like a YUI compressor to get it smaller. I have no idea as to what’s up with this and that’s one unfortunate side in system that the developer doesn’t appear to be able to offer any support currently, which I can’t fault him for as he gives away the product for free.
I have needed to customize the download a good deal for my needs and amazingly, it’s taken well to this, which was refreshing. It doesn’t rely on any outside JS libraries, so you don’t have to worry about breaking an dependencies. It’s all self contained and happily working with itself.
The only big issue beyond the source downloading problem is that if it appears the system is built mainly around AJAX form submissions, which is very cool for those only doing that. For those who are doing a more traditional posting of form submissions, you’ll need to shift the content of the WYSWYIG in to a form data item to actually get it. Not a terribly hard thing to do, but it will drive you insane until you realize that that isn’t happening.
This is my take on a number of editors. If you have other suggestions, please feel free to contribute below. I’m actually going to be rolling out some work with the NicEdit system in the next few days, so you’ll be able to see that in action. It will be in a limited fashion though, so if you show me something that’s better, I’ll gladly give it a try!