Building a simple WYSIWYG Editor

11
votes

I understand that creating a WYSIWYG/Rich Text Editor is an absurd thing to do given the many different, annoying things that are required to achieve cross-browser support. The project I'm currently working on, however, requires a very very simple WYSIWYG editor (three options, link, bold and italics).

My question is then, am I going to spend as much time customizing and paring down TinyMCE to fit my requirements or is the task of creating my own a fairly simple one given the fact there's only three options (and nothing like text resize or undo/redo)?

Also, is the general consensus still iFrame and designMode or are we significantly far along the HTML5 train that I can go with contentEditable?

1
javascriptjquerywysiwyg
I'd imagine that removing features from TinyMCE would be a lot easier and less time consuming than descending the 8 levels of hell that are building your own cross-browser WYSIWYG editor. – Rory McCrossan
I've just googled and it appears to be a straight-forward affair to remove features from TinyMCE: tinymce.com/tryit/custom_formats.php. Notably, the theme_advanced_buttons1 variable. – Rory McCrossan
Take a look at WYMEditor. It doesn't have all the bells and whistles of TinyMCE or CKEditor, but may be well suited for what you need. – unclenorton
TinyEditor may be useful, although hard to tell a whole lot about browser support. scriptiny.com/2010/02/javascript-wysiwyg-editor – mg1075
WYMEditor looks like something that could be helpful. Thanks! – Dormouse

1 Answers

4
votes

You have to ask yourself one question, do you feel lucky^H^H^H^H^H^H^H^H do you want to maintain said WYSIWYG editor?

Two years ago I thought this would be a good idea. I took the editor used here on stackoverflow. Threw away all the UI code and re-wrote the whole thing from the ground up, only saving the markdown parsing piece. And let me tell you, markdown is a whole lot simpler than HTML/WYSIWYG. The final javascript, UI only, is 1600+ lines of code and took about 2 weeks to write the first pass of full functionality.

I implemented it into the web app I was working on a the time and learned something real quick: I was now spending 50% of my time maintaining an editor and the other 50% of my time delivering code for the actual domain-specific part of the web app I was working on. That basically means I was spending half of my time not delivering anything that really contributed to the bottom line of the web app.

So how about you -- Is this WYSIWYG editor such a core, critical part of your app so much so that you'd be willing to now spend half of your time supporting it -OR- is the other bits that your web app is doing far exceed the importance of this one piece of your UI so much so that you could "farm it out" to TinyMCE?

Also, there are a lot more options out there besides TinyMCE which you could use as a starting point.