MT：Custom Editor Button 2の小技をいくつか

Movable Typeの記事編集画面に任意のボタンを追加するプラグイン、Custom Editor Button 2の小ネタをあつめて紹介。

Custom Editor Button 2を利用すると、MTの記事編集画面に自分の好みのボタンをカスタマイズすることができます。ボタンの作り方などは、作者さまの以下のページに解説がありますので参照されるといいでしょう。

Writting Custom Button Plugins - blog.aklaswad.com

上記のページを参考にいくつかためしてみました。

その１．MovableType 5でjQueryの記述がつかえる

Movable Type5では、管理ページでjQueryがつかわれていることがわかりました。そこで、Custom Editor Button 2で、jQueryのコードがつかえるかためしてみました。

なお、MT4xで試すには、記事編集テンプレートのhead要素にjQuery本体が読み込まれるように改造しておく必要があります。

先に示しました、Writting Custom Button PluginsのページにのっているHello Buttonを参考にした簡単な例で示します。

buttons:
    hello:
        face_text: B-1
        title: get entry-title text
        code: |
            function ceb_hello ( text ) {
                text = jQuery('input#title').val();
                return text;
            }

face_textは、画像ボタンを使わない場合の書き方です。この場合、テキストは長くないほうが見やすいかと。

上記の例ですと、このようなボタンを必要とするヒトはいないとは思いますが、記事タイトルの欄に書かれているテキストを選択したテキストと変換（非選択でタイトルをカーソル位置に入力）するものです。

という具合に、jQueryが使えると簡単な記述でボタンを作ることが可能になります。

その２．選択テキストをキーワードのフィールドに入れる

選択テキストをキーワード欄に入力するのも簡単にできます。

buttons:
    keyword:
        face_text: B-2
        title: text to keyword field
        code: |
            function ceb_keyword ( text ) {
            var getKeyword = $('input#keywords').val();
            if ( getKeyword.length ==0 ){
            $('input#keywords').val(text);
            } else if(text){
              getKeyword += "," + text;
              $('input#keywords').val(getKeyword);
            }
                return;
            }

ID:keywordsのinput要素のvalueに（実際は$('#keywords')でいいはずです）選択キーワードを追加していきます。例のコードは簡単なものですから、実用にはHTMLタグをリムーブする処理もいれたほうがいいかもです。

その３．テキストエリア外も操作する

以下はMovable Type5 (ベータ1)の左側にある、サブメニューを開閉するボタンです。

buttons:
    open_submenu:
        face_text: B-3
        title: view all submenu
        code: |
            function ceb_open_submenu () {
            $('ul.sub-menu').toggle();
                return;
            }

簡単なjQueryのトグルです。左メニューが一発で全部開いたら気分いいかなとおもって作ってみました。

その４．メッセージを表示

動作時にメッセージを表示します。

buttons:
    message:
        face_text: B-4
        title: message
        code: |
            function ceb_message (text) {
                ceb_sysmessage(text, 3);
                return;
            }

ceb_sysmessage() 関数を利用します。例では選択テキストを表示しますが、シングルクォーテーションで括った任意の文字列でもいけます。

その５．MT5でポケットボタンが表示されない対処

MT5(b1)で四次元ポケットが表示されていないのを確認しました。実際は表示されているのですが、スタイルの位置が原因で表示されていないように見えるというものです。

具体的にはCustomEditorButton2.pmファイルの最後のほうのスタイルシートの箇所で、div#ceb-containerと、div#ceb-boxに対するwidthプロパティの指定をコメントアウトすれば表示されるようになりました。

その６．ボタン画像マウスオーバーのスタイル

作ったボタンでマウスオーバー時の色違いのボタンを用意します。先述のCustomEditorButton2.pmのスタイルシートの部分にボタンのhoverのスタイルを追加します。例をしめします。

a.command-hogehoge_button:hover{
background: url(/mt-static/plugins/HTMLButtons/images/hogehoge_button-hover.png) no-repeat!important;
}

ボタンの名前がhogehoge_buttonとしたときの例です。ボタンの名前というのは、yamlファイルのbuttons:の次の階層に書かれている文字列のことです。

その7. 選択範囲を分かち書きにする

単語らしきものに対して、前後に半角スペースをつけるものです。

buttons:
    separatingwords:
        image: images/separatingwords.png
        title: Separating Words in Japanese with Spaces
        code: |
            function ceb_separatingwords ( text ) {
                var reg =/([a-zA-Z]\w+)/g;
                text = text.replace(reg, " $1 ");
                return text;
            }

markdiarycom / mt-plugin-CEBSeparatingWords -- Bitbucket

まとめのようなもの

ということで、Movable Type 5でjQueryが使えると、何でもアリ（？）な世界に、というか自分のやろうとしていることの実現が近くなるかもしれません。試したMT5は今の時点でベータ版ということで、今後、エディタの動作がどう変わっていくのかという点も注目していきたいところです。

最後に、上記で示した例をパックしたプラグインを置いておきます。

Download

HelloWorld.zip

s/ceb_message/ceb_sysmessage/
その５．のセクションが２つあったものを修正済み