Decent, flexible WYSIWYG editing in the browser is still an inconsistent affair at best in terms of user experience, integration effort, and generated markup.

prototype.jsベースのWYSIWYGエディタウィジェット「Control.TextArea」



利用にあたってのサンプルコードは次です。

­textarea = new Control.TextArea('textarea_id');
­textarea.textarea; //refers to the DOM element 'textarea_id'
­textarea.observe('change',function(){
­    //called after the user types content, or clicks a button
­    //the change event refers to the Control.TextArea object, NOT the DOM element object
­});
­textarea.onChangeTimeoutLength = 500; //default value, amount to wait before firing the change callback
­
­textarea.getValue(); //gets the contents of the whole textarea
­textarea.getSelection(); //gets the current selection as a string
­textarea.replaceSelection('my new text'); //repalce the current selection with this text
­textarea.wrapSelection('before text','after text'); //wrap the current selection with these two strings
­textarea.insertBeforeSelection('before text'); //inserts the string before the current selection
­textarea.insertAfterSelection('after text'); //inserts the string after the current selection
­textarea.insertBeforeEachSelectedLine('> '); //inserts the string before each selected line
­textarea.injectEachSelectedLine(function(lines,line){ //works just like Hash.inject() for each selected line
­    lines.push(line); //this logic won't modify the selection, but you can modify each line here
­    return lines;
­});

 オブジェクトにまとめられていてシンプルに使えて便利です。
prototype.js風のメソッドが用意されているのも使いやすいかもしれませんね。