TipsJsToolButton » 履歴 » バージョン 2
Mitsuyoshi Yoshida, 2011/06/13 12:43
| 1 | 1 | Mitsuyoshi Yoshida | h1. wiki のツールボタンを追加する |
|---|---|---|---|
| 2 | |||
| 3 | [[TipsWikiMacro|前節]] でマクロの作り方を説明しました。マクロで wiki を拡張できるのはいいのですが、ちょっとマクロは書きづらいです。そこで wiki 編集のツールボタン(テキストボックスの上についているの)があると簡単に使えるようになります。これがあれば、ユーザも使ってくれるようになるでしょう。このボタンの追加方法を紹介します。 |
||
| 4 | |||
| 5 | ただし、この Tips は Rails の「設定より規約」というやつで、上手くいくときは結構簡単にできるのですが、ちょっと間違っているとどこが悪いのかわからなくて結構ハマるので、名前の付け方には注意をしてください。 |
||
| 6 | !jstoolbutton.png! |
||
| 7 | |||
| 8 | h2. サンプルコード |
||
| 9 | |||
| 10 | * "表示":http://code.google.com/p/myoshida-rp/source/browse/#svn%2Ftrunk%2FTips%2Falias%2Fwikimacro_jstb |
||
| 11 | * "ダウンロード":http://code.google.com/p/myoshida-rp/downloads/detail?name=sample-wikimacro_jstb.zip&can=2&q=#makechanges |
||
| 12 | |||
| 13 | |||
| 14 | h2. アイコンと CSS ファイルの作成 |
||
| 15 | |||
| 16 | サンプルは前の wikipedia のマクロのプラグインをツールボタンを追加するように改造したものです。 |
||
| 17 | このプラグインではツールボタン用のアイコンを必要とするので、その画像ファイルと css ファイルを用意します。この辺りの詳しくは [[TipsOriginalImage|プラグイン独自のアイコンを使用する]] の Tips を見てみてください。 |
||
| 18 | |||
| 19 | css の定義は @public/stylesheets/jstoolbar.css@ を参考にして定義します。 |
||
| 20 | 2 | Mitsuyoshi Yoshida | <pre><code class="js"> |
| 21 | 1 | Mitsuyoshi Yoshida | .jstb_wikipedia_link { |
| 22 | background-image: url('../images/wikipedialink.png'); |
||
| 23 | } |
||
| 24 | 2 | Mitsuyoshi Yoshida | </code></pre> |
| 25 | 1 | Mitsuyoshi Yoshida | クラス名はツールボタンはみんな jstb_ で始まっているので、それにあわせます。おそらく JavaScriptToolButton を意味しているのでしょう。 |
| 26 | 名前は *wikipedia_link* にしています。 |
||
| 27 | |||
| 28 | |||
| 29 | h2. AssetTagHelper のパッチ |
||
| 30 | |||
| 31 | ツールバーを追加するには AssetTagHelper のパッチを使います。 |
||
| 32 | このパッチは以下のファイルを作って init.rb で require します。 |
||
| 33 | *lib/wikipedia_link_asset_tag_helper_patch.rb* |
||
| 34 | ファイルを require しているだけなので、 init.rb に直接記述してもよさそうな気がするのですが、直接 init.rb に書くとなぜか Redmine が立ち上がらなくなってしまいます。 |
||
| 35 | |||
| 36 | パッチの中身を見てみましょう。 |
||
| 37 | <pre><code class="ruby"> |
||
| 38 | module ActionView |
||
| 39 | module Helpers |
||
| 40 | module AssetTagHelper |
||
| 41 | def javascript_include_tag_with_wikipedia_link(*sources) |
||
| 42 | out = javascript_include_tag_without_wikipedia_link(*sources) |
||
| 43 | if sources.is_a?(Array) and sources[0] == 'jstoolbar/textile' |
||
| 44 | out += javascript_tag <<-javascript_tag |
||
| 45 | jsToolBar.prototype.elements.wikipedia_link = { |
||
| 46 | type: 'button', |
||
| 47 | title: 'Link to Wikipedia', |
||
| 48 | fn: { |
||
| 49 | wiki: function() { this.encloseSelection("{{wikipedia(", ")}}") } |
||
| 50 | } |
||
| 51 | } |
||
| 52 | javascript_tag |
||
| 53 | out += stylesheet_link_tag 'wikipedialink', :plugin => 'redmine_wikipedia_link' |
||
| 54 | end |
||
| 55 | out |
||
| 56 | end |
||
| 57 | alias_method_chain :javascript_include_tag, :wikipedia_link |
||
| 58 | end |
||
| 59 | end |
||
| 60 | end |
||
| 61 | 2 | Mitsuyoshi Yoshida | </code></pre> |
| 62 | 1 | Mitsuyoshi Yoshida | |
| 63 | このファイルでは ActionView::Helpers::AssetTagHelper のモジュールに *javascript_include_tag_with_wikipedia_link* メソッドを追加しています。 |
||
| 64 | |||
| 65 | 基本的にツールバーを追加のプラグインを作りたい場合、このファイルの wikipedia_link の部分を適当な名前に変えれば OK です。 |
||
| 66 | それ以外の修正点を次に上げておきます。 |
||
| 67 | |||
| 68 | 10 行目の title はマウスを持ってきたときのツールチップとして使われます。実際のプラグインを作る場合は国際化して説明を書いた方がいいでしょう。 |
||
| 69 | |||
| 70 | 12 行目は JavaScript の部分となります。 encloseSelection() メソッドは *画像* や *wiki へのリンク* などの 2 つの文字列で挟むタイプのツールバーのときに使用するもので、前後の文字列を引数として渡します。 |
||
| 71 | |||
| 72 | 16 行目は css ファイルの指定です。ここも詳しくはオリジナルアイコンの使用の Tips を見てください。 |
||
| 73 | |||
| 74 | これでツールバーボタンの追加は完成です。 |
||
| 75 | ちなみに *javascript_include_tag_without_wikipedia_link* のメソッドはプラグイン中のどこにも定義していませんが、 ruby のメタプログラミングを上手く使って処理してくれているみたいで、定義する必要はありません。 |