使いやすいYUIライブラリのWYSIWYGエディタ (Rich Text Editor)
2007年8月2日(木) 07:00
Yahoo!のフレームワーク(YUI)には便利な機能が多い。CSSやJavaScriptライブラリなどを組み合わせて利用する。中でも注目したいのがWYSIWYGのRich Text Editor。動作も比較的軽く、インターフェースも使いやすく仕上がっている。そのままでも十分に利用価値があるが、ツールバーにボタンを追加するプラグインを自作して利用することもできる。
入力エリアでのテキストフォーカスを行うと、ツールバー上の利用できるボタンがアクティブになる。若干ブラウザによっては反応が悪い場合もある。入力中にインターフェースの反応速度が低下するなどストレスを感じるような事が無い。

YUI Rich Text EditorにFlickr検索を追加
実装サンプルとして紹介されているのが、Rich Text EditorのツールバーにFlickr検索を追加するプラグインの実装例。ツールバーのボタンをクリックすると、検索窓が表示されるので任意のタグから画像を探すことが出来る。
結果はサムネイルで表示されるので、入力エリアにドラッグするだけで貼り付けが、完了する。
標準でも使いやすいインターフェースになっている。ドキュメントやサンプルコードなども比較的充実しているので、腰をすえて取り組めばYUIの利用経験が無くても導入することが出来る。導入方法もソースコード付きで説明されているので比較的簡単に利用開始できる。1度試してみてはいかがだろうか。
関連する記事
- デザインが魅力的なスライドショーJavaScript (Lightview)
- 楽にフォーム入力チェックを実装するJavaScript (JSValidate)
- CSSデザインレイアウトをオンラインで簡単に作成する (YAML)
- ユーザーが再配置可能なWedgetを実装するJavaScript (Prototype Portal Class)
- フォームボタンCSSデザインするテクニック (Rediscovering Button Element)
- 半透明の角まるツールチップを表示するJavaScript (CoolTips)
- JavaScriptでプログレスバーを簡単に実装する (jsProgressBarHandler)
- JavaScriptコード圧縮して盗用から守る (packer)
- iTuneのようにカバーアートを表示するFlash (iTunes Coverflow)
- 画像をサムネイルのサイズで表示するJavaScript (jQuery Thumbs)
- Ajaxでサクサク動くWebファイルマネージャ (Relay)
- アンカータグを利用してスムーススクロールを実装する (df Smooth Scroll)
- MacでもFlashでホイール操作が出来るようにする (SWFMacMouseWheel)
- HTMLなどタグ編集を楽にするエディタ機能JavaScript (jTagEditor)
- 使いやすいYUIライブラリのWYSIWYGエディタ (Rich Text Editor)
- フォトショップで作る80種類のテキストエフェクト集 (photoshoproadmap.com)
- Flashで便利なTweenクラスのわかりやすい解説 (Tween Class Easing)
- CSSレイアウト情報をレイヤー表示するブックマーク (XRAY)
- Lightboxのような透過レイヤー表示の実装サンプル (Lightbox Effect)
- CSSデザインで綺麗なボタンを作成する (How to make sexy buttons with CSS)

