Take the 2-minute tour ×

i'm trying to write a very simple wysiwyg editor, where users can simply add bold text, hyperlinks and bullets, after selecting part of the text.. actualy just like CKEditor.

But as far as i know there is no way to add formatting to a textarea. So I would like to know, how do other wysiwyg editors like CKEditor solve this.

share|improve this question

4 Answers 4

up vote 4 down vote accepted

The browser based WYSIWYG editors work by building the HTML for the document/text you're editing. In other words, you're essentially editing HTML inside the browser and not the text in a TEXTAREA. You might want to have a look at the source code for Rich Text Editor and check out Mozilla's Midas Specification before you embark on writing everything from scratch.

share|improve this answer

Well, this doesn't answer the question about how they do it, but you can apply styling to a textarea. Just try:

<textarea style="font-weight:bold;"> </textarea>

As to how editors like the CKEditor do it, most do it by applying a ton of javascript and css to make a <div> seem like a <textarea>. That's how I did it in a MS class on AJAX. Also, if you view the rendered source on the CKEditor demo, you'll see that everything for the input area is a combination of <div> elements.

share|improve this answer
yes, seems like there is no easy way to quickly make your own basic wysiwyg editor. I also found that the entire editor-area is actualy an iframe with full html code inside. So as you type, your keystrokes are captured and the i-frame is updated. how they make the blinking cursur appear and know the current cursor position in the iframe is still a bit of a mysterie to me. But i know what i have to do now: i'll just use ckeditor and dramatically scale down the features instead of writing my own basic editor –  Jules Colle Jul 24 '10 at 11:38

You need to use the contenteditable attribute. A google search will give you a lot of information and examples

share|improve this answer
Just a note that contenteditable is HTML5 which is still very new and not widely supported yet(hopefully soon though). –  David Young Jul 23 '10 at 22:54
True, but it is available in the latest versions of IE, Safari, Firefox, and Opera at least. Though it is notoriously difficult to work with, and works differently in each browser. –  barrylloyd Jul 23 '10 at 22:56
He doesn't need to use contenteditable. The first JS based WYSIWYG editors were written well before contenteditable was introduced. –  Gert Grenander Jul 23 '10 at 23:28
Well, contenteditable has existed for a full decade in Internet Explorer but has only made it into other browsers in the last few years. Mozilla has had content editing available via the designMode property of document for much longer: since around 2003, I think. In IE it's been around as long as contentEditable. designMode on a document in an iframe is still the usual choice for WYSIWYG editors in non-IE browsers; contentEditable still seems a little buggy in Firefox. –  Tim Down Jul 24 '10 at 0:03

Most WYSIWYG, like TinyMCE use pure JavaScript overlays in order to give a rich text editor which looks for textarea html tags to replace a basic text editor with their rich one.

What the javascript editor is really doing is adding the appropriate html tags like <b> or <i> to the text contents.

That's why when you submit the contents of a WYSIWYG editor to the server you typically get html.

share|improve this answer

Your Answer


