Sag Rising

Notes to Myself

Wysiwyg Editors for Habari

Posted by Richard Cockrum on February 18, 2008

In What I Like About Habari I noted that out of the box Habari doesn't have a wysiwyg editor. Everything is written in bare html.

That hasn't changed, but several plugins have appeared to allow you to write your posts in a wysiwyg editor.

The first is a plugin using NicEdit. NicEdit is a slim javascript editor that weighs in at only 73KB. NicEdit is still early in its development. Currently under Internet Explorer it uses html tags for styling. Under Firefox it uses style tags. The window for viewing raw html source opens over the wysiwyg window, but is slightly misaligned. The plugin has been added to the community plugin directory.

The next is a plugin by Michael C. Harris using the popular TinyMCE editor that we all know from WordPress. TinyMCE is the heavyweight of the bunch, weighing in at 1.21MB. It is also the most versatile and complete. It comes with several plugins, including support for flash, skins, spellcheck, and smilies. TinyMCE opens a completely new window to view raw html source. An oddity about it is that the toolbar is on the bottom of the editor window, not the top.

Finally we have jwysiwig. Habari already uses jquery in its javascript code, so using an editor plugin for jquery seems a natural fit. Like NicEdit, the editor is slim, weighing in at only 84KB. It can also be downloaded from the community plugin directory. Like NicEdit, under Firefox jwysiwyg uses styles rather than html tags for styling. The window to view the raw html source opens underneath the wysiwyg editor.

None of these plugins are perfect. jwysiwyg, for example, isn't able to interact with Habari's media silos yet. Whether the other two do or not, I don't know. Neither jwysiwyg nor NicEdit are resizeable. TinyMCE can be configured to be resizeable. They all meet the basic requirements for a wysiwyg editor and adequately meet most needs.

This entry is filed under and . You can follow any responses to this entry through the feed . New comments are currently closed.

2 Responses to Wysiwyg Editors for Habari

Media silos are supported by both the TinyMCE and NicEdit plugins. The main shortcoming with the TinyMCE editor (aside from its size) is that I haven't added many of the configuration options. Once Habari 0.4 has been released (and if people let me know they're using it, because I don't) I'll make it more configurable.

I haven't added any configuration at all to the NicEdit plugin, because I didn't look into what was available, and the documentation seems pretty sparse. Again, if people are using it and they let me know what they want configurable, I'll have a look at it.

We're working on adding media silo support to the jwysiwyg plugin, but my JQuery/JavaScript skills aren't up to the task yet, and I don't have time to work on it at the moment.

As for resizability, I haven't even looked at whether it's possible, but if it is the same solution will likely work for both NicEdit and jwysiwyg.

If only there was someone to pay be to work full time on Habari, I'd be happy. Of course, there'd be about 15 people who'd get the gig before me, but hey :)

Hi Michael,

I haven't used the TinyMCE except to try it out, mostly because of it's size. It's almost as big as the rest of Habari.

It's good to know NicEdit works with the media silos. I've been using it off and on, but mostly waiting for its developers to come out with a new version. It feels strange to me to use style tags for things like emphasis and strong text. There doesn't seem to be a lot of configuration to do for NicEdit other than deciding what buttons to display.

I do like the way jwysiwyg opens the html source window under the wysiwyg window. The only way I would prefer it is if the two were tabs, like with ScribeFire.

Personally, I know absolutely nothing about javascript. I'm using Habari itself to learn PHP, so if it ever came time to pay someone to work on Habari, you can be assured you would be ahead of me in line. :)

What do you think?
Comments for this post are disabled.