How fast does it take to write a simple, custom editor?

Question

by simple I mean, having buttons:

1. bold,
2. italic,
3. numbered list
4. bullet point list
5. indent left
6. indent right
7. spell check (obviously supported by ready made js component)

by custom I mean: having custom icons - so really just custom design

no frameworks, written from scratch, lightweight, compatible with major browsers

this is one of the main components of the webapp, so it has to be super lightweight, that's why I don't want frameworks

Answer 1

Unless you are targeting one browser, editors are immensely complicated components to get to work cross browser. There's no reason to do it yourself, unless you want to learn.

Use one of the many available that allow customization: tinymce , fckeditor , wysihat , others

Answer 2

Don't.

Go get something else (any of those Jason mentioned, or eg what SO itself uses, WMD). Swap out its images. The end.

Seriously you don't want to write your own editor unless you have a very good reason for it functionally , not just what it looks like.

Answer 3

Writing an editor that works cross-platform can be difficult, but, you should create your own framework as you do it, as it is a large project.

If you just want custom icons, that will depend on how long it takes you to make them, but, to get some basic functionality isn't that hard, probably less than 40 hrs of work if you know what you are doing.

In Unix writing your own shell used to be a rite of passage, in javascript it may be writing your own editor. :)

Where it gets tricky is if I have

<b>some text</b><i>more text</i>

and I decide to remove the tags from this text, then how to fix it will get tricky.

If you want to use only css then it gets to be more of a problem as you are grouping text from span tags, and fixing css classes, while the user is continuing to make changes.

I am dealing with this currently as I want an editor that works in XHTML2.0, and it is not a trivial issue, much harder than it is to do in a desktop application.

I would suggest getting it to work on Firefox 3 and Safari first, then, once it is working, go back and add in the code to get it to work on IE8, and if you want IE7, since MS is pushing IE8 out as a critical update now.

Answer 4

Read through the first chapters of the emacs tutorial, and you will see that there is not anything like a "simple" editor. But google will give you lots of easy customizable editors.