gakkieのBlog

YUIのRichTextEditorを使ってみる

このエントリーを含むはてなブックマークはてなブックマーク - YUIのRichTextEditorを使ってみる この記事をクリップ!Livedoorクリップ - YUIのRichTextEditorを使ってみる Yahoo!ブックマークに登録 BuzzurlにブックマークBuzzurlにブックマーク @niftyクリップに追加 このエントリをつぶやくこのWebページのtweets Share on Tumblr FC2ブックマークへ追加 newsing it! この記事をChoix! Googleブックマークに追加 Bookmark this on Delicious Digg This FriendFeedで共有

RichTextEditorが簡単に作れる!で話題のYUI RichTextEditor(beta)を使ってみました。
チュートリアルを見ながらなので、ほんとに触わりだけですが。

つづきはWebで。

まず、HTMLにYUIを読み込みます。
これはチュートリアルといっしょです。
[html]







[/html]

次にbodyを書きます。
textareaがRichTextEditorになる部分です。

[html]




[/html]

チュートリアルだとブラウザ上でwordpadができて終わりだったので、
PHPでデータが受け取れるかを試すためにformにしてあります。

それから、textareaがブラウザに読み込まれる前にrender()メソッド(これが呼ばれたときにtextareaがRichTextEditorになる)が呼ばれると、何をrenderするのかわからないのでエラーになります。
なので、本当はブラウザが全部ロードしたことをイベントで受け取ってからrender(厳密にはインスタンスを作成)しなくてはならないのですが、めんどうだったので簡易的に、textareaのあとに別ファイルでJavascirptを生書きしました。

下のようにmyEditor.jsを書きます。

[js]
var myEditor = new YAHOO.widget.Editor(‘msgpost’, {
handleSubmit: true,
height: ‘300px’,
width: ‘522px’,
dompath: true, //Turns on the bar at the bottom
animate: true //Animates the opening, closing and moving of Editor windows
});
myEditor.render();
[/js]

ここでは
handelSubmit: true;
だけ、チュートリアルから変更してあります。
こうすることで初めて、ユーザが変更したテキストをPHPで受け取れるというわけです。

受け取り方はもっと簡単で、$_POST[‘msgpost’]を使って、<とか>とかをサニタイズされたHTMLデータを読むことができます。

ちょっと重いけど、YUIはやっぱり便利ですね。

それよりも、Wordpressのcodeタグの使いかたを覚えるのに時間がかかりました・・・。



Leave a Reply