In my project I need to write small WYSIWYG editor (just let users make text bold/italic/underline and maybe some more). So I wouldn't like to use monsters like tinymce or fckeditor. My question is what HTML elements and javascript functions do I need to know for it? An HTML element in which I can edit and format text is a very interesting thing in this question.
In my project I need to write small WYSIWYG editor (just let users make text bold/italic/underline and maybe some more). So I wouldn't like to use monsters like tinymce or fckeditor. My question is what HTML elements and javascript functions do I need to know for it? An HTML element in which I can edit and format text is a very interesting thing in this question.
Share Improve this question edited Jan 22, 2011 at 20:58 Charles Merriam 20.5k7 gold badges75 silver badges84 bronze badges asked May 4, 2009 at 21:37 user101159user101159 1111 silver badge6 bronze badges 1- You're going to have a hard road ahead of you if you'd like to support multiple browser engines. This talk (1h31m in) by Norbert Pomaroli from the Aloha Editor Team goes into some of the gotchas. How did you manage btw? – balupton Commented Mar 3, 2011 at 23:01
5 Answers
Reset to default 10If you want to roll your own, look at Midas. It's available in FF3+, IE, Safari, Opera, Chrome.
Basically, you use contentEditable and execCommand to turn the browser into an RTE.
document.getElementById('edit').contentDocument.designMode = "on";
Have a look at http://www.mozilla.org/editor/ie2midas.html
There is http://www.gosu.pl/steditor/ which code is quite simple and clear. It uses designMode and execCommand as was mentioned in other answers.
Alternatively use simple languages like markdown or textile and provide a live preview.
I think most people will get asterisks for emphasis and double ones for bolding.
I've used YUI's wysiwyg editor in the past and it lets you configure the the buttons so you could easily use it and limit the buttons to bold/italic/underline.