Bold Text In Textarea

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 a

Solution 1:

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

<textareastyle="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.

Solution 2:

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.

Solution 3:

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

Solution 4:

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.