コンポーネントの設定
Rich Text Editorコンポーネントは、<textarea>タグに対してYAHOO.widget.Editorを設定することで表示できる。その例をリスト2に示す。このとき、コンストラクタ引数には、<textarea>タグのIDと設定項目が必要だ。最低限width/heightで横/縦の大きさを指定しておく必要がある。
リスト2 YAHOO.widget.Editorの設定（例）
<form>
<textarea name="yuieditor" id="yuieditor" rows="20" cols="75">Yahoo! User Interface Libraryは、米Yahoo!が開発しているJavaScriptライブラリです。</textarea>
<!-- その他のコンポーネントなど -->
</form>
<script type="text/javascript"><!--
/* ..... 以下のソースコードはFirefox2.0.0.6で実行確認 ..... */
var yuieditor = new YAHOO.widget.Editor('yuieditor', {
width: '500px',
height: '300px',
dompath: true,
animate: true
});
// ..... (リスト3) .....
yuieditor.render(); // コンポーネント表示
// --></script>
イベント処理
コンポーネントが、ツールバーをロードした後にtoolbarLoadedイベントが発生する。このとき、ツールバーにボタンを追加することができる。このボタンに実行する処理をあらかじめ設定しておくと、ボタンのクリックでそれを実行できるようになる。
リスト3は、ツールバーに追加されたボタンをクリックすると、図2のように緑色の部分が表示される処理を記述したものだ。内容は、YAHOO.widget.Overlayオブジェクトによる緑色の枠を表示させるcustom1Menu関数と、ボタンの追加を行う部分に大きく分けられる。
ボタンの追加はツールバー（Editor.toolbar）のaddButtonToGroupメソッドで行う。第1引数はボタンに関する設定で、形状（push）やクリック後に表示する内容（menu）などを記述する。第2引数はボタンを追加するグループで、図2のように'Insert Item'グループに追加するには'insertitem'を指定する。他に要素が必要であれば、次の引数にそれを記述できる。
リスト3 ツールバーへのボタンの追加（<script>内）
// ボタンのクリックで実行する処理
var custom1Menu = function() {
var menu = new YAHOO.widget.Overlay( 'custom1',
{ width: '200px', height: '50px', visible: false } );
// ボタンのクリックで表示させる内容
menu.setBody('<div>追加したボタンがクリックされた<br /><br />このボタンによるメニュー表示</div>');
menu.render( document.body );
// 最初は非表示にしておく
YAHOO.util.Dom.setStyle( 'custom1', 'visibility', 'hidden' );
// menu.element.style.visibility = 'hidden';
return menu;
};
// ツールバーがロードされたら'Insert Items'のグループにボタンを追加
yuieditor.on( 'toolbarLoaded', function() {
yuieditor.toolbar.addButtonToGroup(
{ type: 'push', label: '表示ボタン', value: 'custom1', menu: custom1Menu() }
, 'insertitem');
}, yuieditor, true );
図2 ツールバーに追加してたボタンをクリックしたところ
