リビジョン 2 - 履歴 - TipsJsToolButton - r-labs

TipsJsToolButton » 履歴 » リビジョン 2

リビジョン 1 (Mitsuyoshi Yoshida, 2011/05/26 01:45) → リビジョン 2/3 (Mitsuyoshi Yoshida, 2011/06/13 12:43)


 h1. wiki のツールボタンを追加する 

 [[TipsWikiMacro|前節]] でマクロの作り方を説明しました。マクロで wiki を拡張できるのはいいのですが、ちょっとマクロは書きづらいです。そこで wiki 編集のツールボタン(テキストボックスの上についているの)があると簡単に使えるようになります。これがあれば、ユーザも使ってくれるようになるでしょう。このボタンの追加方法を紹介します。 

 ただし、この Tips は Rails の「設定より規約」というやつで、上手くいくときは結構簡単にできるのですが、ちょっと間違っているとどこが悪いのかわからなくて結構ハマるので、名前の付け方には注意をしてください。 
 !jstoolbutton.png! 

 h2. サンプルコード 

 * "表示":http://code.google.com/p/myoshida-rp/source/browse/#svn%2Ftrunk%2FTips%2Falias%2Fwikimacro_jstb 
 * "ダウンロード":http://code.google.com/p/myoshida-rp/downloads/detail?name=sample-wikimacro_jstb.zip&can=2&q=#makechanges 


 h2. アイコンと CSS ファイルの作成 

 サンプルは前の wikipedia のマクロのプラグインをツールボタンを追加するように改造したものです。 
 このプラグインではツールボタン用のアイコンを必要とするので、その画像ファイルと css ファイルを用意します。この辺りの詳しくは [[TipsOriginalImage|プラグイン独自のアイコンを使用する]] の Tips を見てみてください。 

 css の定義は @public/stylesheets/jstoolbar.css@ を参考にして定義します。 
 <pre><code class="js"> <pre> 
 .jstb_wikipedia_link { 
   background-image: url('../images/wikipedialink.png'); 
 } 
 </code></pre> </pre> 
 クラス名はツールボタンはみんな jstb_ で始まっているので、それにあわせます。おそらく JavaScriptToolButton を意味しているのでしょう。 
 名前は *wikipedia_link* にしています。 


 h2. AssetTagHelper のパッチ 

 ツールバーを追加するには AssetTagHelper のパッチを使います。 
 このパッチは以下のファイルを作って init.rb で require します。 
     *lib/wikipedia_link_asset_tag_helper_patch.rb* 
 ファイルを require しているだけなので、 init.rb に直接記述してもよさそうな気がするのですが、直接 init.rb に書くとなぜか Redmine が立ち上がらなくなってしまいます。 

 パッチの中身を見てみましょう。 
 <pre><code class="ruby"> 
 module ActionView 
   module Helpers 
     module AssetTagHelper 
       def javascript_include_tag_with_wikipedia_link(*sources) 
         out = javascript_include_tag_without_wikipedia_link(*sources) 
         if sources.is_a?(Array) and sources[0] == 'jstoolbar/textile' 
           out += javascript_tag <<-javascript_tag 
 jsToolBar.prototype.elements.wikipedia_link = { 
	 type: 'button', 
	 title: 'Link to Wikipedia', 
	 fn: { 
		 wiki: function() { this.encloseSelection("{{wikipedia(", ")}}") } 
	 } 
 } 
 javascript_tag 
           out += stylesheet_link_tag 'wikipedialink', :plugin => 'redmine_wikipedia_link' 
         end 
         out 
       end 
       alias_method_chain :javascript_include_tag, :wikipedia_link 
     end 
   end 
 end 
 </code></pre> </pre> 

 このファイルでは ActionView::Helpers::AssetTagHelper のモジュールに *javascript_include_tag_with_wikipedia_link* メソッドを追加しています。 

 基本的にツールバーを追加のプラグインを作りたい場合、このファイルの wikipedia_link の部分を適当な名前に変えれば OK です。 
 それ以外の修正点を次に上げておきます。 

 10 行目の title はマウスを持ってきたときのツールチップとして使われます。実際のプラグインを作る場合は国際化して説明を書いた方がいいでしょう。 

 12 行目は JavaScript の部分となります。 encloseSelection() メソッドは *画像* や *wiki へのリンク* などの 2 つの文字列で挟むタイプのツールバーのときに使用するもので、前後の文字列を引数として渡します。 

 16 行目は css ファイルの指定です。ここも詳しくはオリジナルアイコンの使用の Tips を見てください。 

 これでツールバーボタンの追加は完成です。 
 ちなみに *javascript_include_tag_without_wikipedia_link* のメソッドはプラグイン中のどこにも定義していませんが、 ruby のメタプログラミングを上手く使って処理してくれているみたいで、定義する必要はありません。

プロジェクト

全般

プロフィール

r-labs

TipsJsToolButton » 履歴 » リビジョン 2