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.

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.

• javascript
• jquery
• html

4 Answers 4

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 bination of <div> elements.

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.

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

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.