プラグインを作成することで、CustomEditorButton2に任意のボタンを追加できます。
プラグインは通常の Movable Type のプラグインとして作成します。
といっても、ボタンの画像と簡単なyamlファイルを用意するだけですので、MTのプラグイン作成の知識はほとんど必要ありません。
ここでは、ボタンをクリックすると「Hello!」という文字列を追加するボタンを例として、作成の流れを見ていきます。
まずはyamlファイルの作成から始めましょう。
yamlファイルを作成する
プラグイン情報を書く
適当なテキストエディタで、新規ファイルを作成します。
最初に書くのは、プラグインとしての情報です。ここで書いた内容が、MTの管理画面のプラグイン一覧に表示されます。
name: Hello Button
id: Hello Button
key: HelloButton
author_link: http://blog.aklaswad.com/
author_name: Aklaswad
description: Say hello.
version: 0.1
plugin_link: http://blog.aklaswad.com/mtplugins/hellobutton/
あちこち省略しても問題ありませんが、せっかくだからきちんと書いておきましょう。
ボタンを追加する
次に、ボタンを追加します。
buttons:
hello:
image: hello.png
title: say hello!
code: |
function ceb_hello ( text ) {
return 'Hello! ' + text;
}
一つのプラグインで、複数のボタンを追加することも出来ます。
ボタンの名前を指定する
buttons:
hello:
この部分です。ここからボタンの指定が続きますよ、という指定の「butons:」の次の行に、半角スペース4つ分字下げしてボタンの名前を指定します。今回は「hello」という名前にします。
名前には半角スペースなどを含めないようにしてください。
image: ボタンの画像を指定する
用意した画像ファイルのファイル名を指定します。詳しくは後述します。
title: ボタンの動作の説明を書いておきましょう
ボタンの上にマウスのカーソルを置いたときに、ここに指定したものが表示されます。
code: javascriptでボタンの動作を作る
javascriptでコードの動作を指定します。字下げ幅をきちんと守るようにしてください。
ここからは、少しだけjavascriptの知識が必要となります。
ボタンがクリックされたときには、先ほど決めたボタンの名前に、「ceb_」という接頭辞をくっつけた
関数がコールされます。
この関数に対して、現在エディタ上で選択している文字列が第一引数として渡されます。
ほとんどの場合、この引数「text」に対して何らかの加工をすることが目的となるでしょう。
加工した結果の文字列を、関数の戻り値として返却してください。エディタの選択部分に挿入されます。
function ceb_hello ( text ) {
return 'Hello! ' + text;
}「code」ブロックには、呼び出される関数以外の関数も記述できます。
改行して保存する
yamlファイルの仕様で、最後の行の後ろに改行が必要です。忘れないようにしてください。
編集が完了したら、改行コードを「LF」にして保存します。名前は「config.yaml」としてください。
ボタンの画像を作成する
画像は22px x 22px の大きさで作成します。画像ファイルの種類は、ブラウザが表示可能な種類なら何でもOKです。
もし、画像を用意するのが面倒なら、単にテキストを表示させることも出来ます。
「image」は指定せず、代わりに「face_text」という項目に、表示させたいテキストを指定してください。あまり長いと、ボタンからはみ出してしまうので気をつけましょう。
buttons:
bye:
face_text: bye
title: say bye!
code: |
function ceb_bye ( text ) {
return 'bye ' + text;
}
作成したプラグインのインストール
MTのpluginsディレクトリに、作成したプラグイン用の名前のディレクトリを作成し、その中に先ほど作成したyamlファイルを「config.yaml」という名前で保存します。
同様に、MTのmt-staticディレクトリにもpluginsというディレクトリがありますので、その中にプラグインの名前のディレクトリを作成し、画像ファイルを置きます。
ファイルの設置が完了したら、プラグイン一覧画面を開いて、インストールを確認してみましょう。
成功です!
･･･もしプラグインが一覧に表示されていない場合は、アップロード先のディレクトリが正しいか見てみましょう。
また、以下のようなエラーが出て管理画面にアクセスできなくなってしまった場合
Got an error: Error reading /home/foo/public_html/cgi-bin/mt/plugins/HelloButton/config.yaml: Stream does not end with newline character (YAML_PARSE_ERR_NO_FINAL_NEWLINE) at lib/MT/Component.pm line 150.
yamlファイルの改行コードが間違っている場合や、yaml形式の字下げがおかしくなっている場合、最後の改行が足りない場合が考えられます。修正してみてください。
さて、無事にインストールできたら、早速ブログ記事編集画面を開いてみましょう。自動的にボタンが追加されているはずです。
作成したプラグインを配布する
作成したプラグインを配布する場合、MTの一般的なディレクトリ構成に併せてパッケージングしましょう。画像のようになると思います。
完成したプラグインはこちらになります。
その他、細かい仕様
コールバックに渡される引数
選択文字列「text」のあとに、ヘルパーオブジェクトが渡されます。
function ceb_foo(text, args) {
//do something
}このヘルパーオブジェクトから、いくつかのプロパティやメソッドを利用できます。
現在用意されているのは以下の物です。
- innerHTML()
- 選択範囲をHTML文字列で返します。
第一引数の「text」では、エディタがiframeで表示されているときも、見えている文字列の取得になりますが、innerHTML()を利用すると、iframeでの選択範囲のマークアップを含めた内容をHTMLで取得することが出来ます。 - iframe
- エディタがiframeで表示されているかをbool値で確認できます。
- editor
- MT.App.editorオブジェクトの参照を取得できます。
コールバックの戻り値について
コールバック関数が未定義値を返却した場合、CustomEditorButtonは、エディタに対して一切の変更を加えません。