views:

324

answers:

4

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

(javascript)

A: 

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.

wr
What does "emacs" have to do with writing a *simple* editor?
foljs
+14  A: 

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

Jason Harwig
really so difficult? have you ever tried copy, paste and customize approach i.e. http://www.bewebmaster.com/55.php ? I am interested in answers of people that actually tried to write it without js platforms/frameworks
rocky
you do realize that the tutorial you linked to completely ignores safari and konquerer, right? look in the initializeEditor function "//enable designMode if the browser is not safari or konqueror.". and also it ignores them again in displayEditor. If you ask me, that's not cross browser.
contagious
what's the problem with fixing it for safari? it's better to fix it than to use something much heavier... and who uses konquerer? i only care about the main browsers
rocky
Tracker1
+3  A: 

Don't.

Go get something else (any of those Jason mentioned, or e.g. 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.

Sai Emrys
the good reason is to have it as lightweight as possible, as I m building something that hopefully millions of people will be using :)
rocky
1) Millions of people already use other editors with no problems. 2) There is a selection from simple to full blown html editor components. 3) Have you profiled the editor js as a bottleneck for your web app? If, not, then "Premature optimization is the root of all evil". 4) In all probability, millions of people will *not* use your web app. But if they do, the editor component would be the least of your worries. 5) js code is cached, anyway. 6) All modern browsers (IE8, Safari, Mozilla, Chrome) have efficient js engines.
foljs
the editor is one of 2 the most important components on my webapp, so it is a worry, it has to be lightweight. so which lightweight, cross browser editor component do you recommend?
rocky
I use and like WMD. FYI there are two versions of it - one on github (and deobfuscated), one on WMD's site. But what you use depends on your needs; what's the underlying markup language? What features do you need? Etc.?
Sai Emrys
+3  A: 

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.

James Black
IMO this is bad advice - the OP clearly does not need an actual custom editor, just some trivial customization. Embarking on creating one would be a Bad Idea and unnecessary yak shaving.
Sai Emrys
The question was how to go about doing it, not on whether it is a good idea. In my case, tinyMCE won't work with XHTML 2.0 so my only real option is to write my own, but, there are difficulties, which I tried to relate.Besides, writing your own shell serves no purpose beyond showing off skills, perhaps writing an editor or framework will be the same rite of passage.
James Black