使いやすいYUIライブラリのWYSIWYGエディタ (Rich Text Editor)

2007年8月2日(木) 07:00

Yahoo! UI Library Rich Text Editor

Yahoo!のフレームワーク(YUI)には便利な機能が多い。CSSやJavaScriptライブラリなどを組み合わせて利用する。中でも注目したいのがWYSIWYGのRich Text Editor。動作も比較的軽く、インターフェースも使いやすく仕上がっている。そのままでも十分に利用価値があるが、ツールバーにボタンを追加するプラグインを自作して利用することもできる。

入力エリアでのテキストフォーカスを行うと、ツールバー上の利用できるボタンがアクティブになる。若干ブラウザによっては反応が悪い場合もある。入力中にインターフェースの反応速度が低下するなどストレスを感じるような事が無い。

YUI Rich Text EditorにFlickr検索を追加
実装サンプルとして紹介されているのが、Rich Text EditorのツールバーにFlickr検索を追加するプラグインの実装例。ツールバーのボタンをクリックすると、検索窓が表示されるので任意のタグから画像を探すことが出来る。
結果はサムネイルで表示されるので、入力エリアにドラッグするだけで貼り付けが、完了する。

標準でも使いやすいインターフェースになっている。ドキュメントやサンプルコードなども比較的充実しているので、腰をすえて取り組めばYUIの利用経験が無くても導入することが出来る。導入方法もソースコード付きで説明されているので比較的簡単に利用開始できる。1度試してみてはいかがだろうか。

さくらインターネット

関連する記事