textarea中的粗体文字

Question

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.

Answer 1

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.

Answer 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.

Answer 3

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

Answer 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.