編集部からのお知らせ
(記事集)ニューノーマルで伸びる業界
「ニューノーマルとIT」新着記事一覧

書式設定可能なエディタも簡単に:強力AjaxライブラリYahoo! UI Library - (page 2)

沖林正紀

2007-09-21 12:30

コンポーネントの設定

 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 ツールバーに追加してたボタンをクリックしたところ

ZDNet Japan 記事を毎朝メールでまとめ読み(登録無料)

特集

CIO

モバイル

セキュリティ

スペシャル

ホワイトペーパー

新着

ランキング

  1. 運用管理

    ファイルサーバ管理のコツはここにあり!「無法状態」から脱出するプロセスを徹底解説

  2. クラウドコンピューティング

    社員の生産性を約2倍まで向上、注目の企業事例から学ぶDX成功のポイント

  3. コミュニケーション

    真の顧客理解でCX向上を実現、いまさら聞けない「データドリブンマーケティング」入門

  4. ビジネスアプリケーション

    デメリットも把握しなければテレワークは失敗に?─LIXIL等に学ぶ導入ステップや運用のコツ

  5. 運用管理

    ニューノーマルな働き方を支えるセキュリティ-曖昧になる境界に変わらなくてはならないデータセンター運用

NEWSLETTERS

エンタープライズ・コンピューティングの最前線を配信

ZDNet Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]