前の記事 ≪:ブラウザ上で動作する便利なウィジェットを簡単作成「iCarousel」
次の記事 ≫:ライトウェイトなPHP用MVCフレームワーク「adroit」

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

2007年05月14日-はてなブックマーク

スポンサード リンク
Control.TextArea : Cross Browser TextArea Manipulation
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風のメソッドが用意されているのも使いやすいかもしれませんね。

関連の記事検索:JavaScript, prototype.js, WYSIWYG, Ajax, ライブラリ, UI
スポンサード リンク

By.KJ : 2007年05月14日 10:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)