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 as far as i know there is no way to add form开发者_StackOverflow社区atting to a textarea. So I would like to know, how do other wysiwyg editors like CKEditor solve this.
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.
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.
精彩评论