[MovableType]管理画面の記事編集ツールバーでオリジナルボタンを追加する方法

2011/07/23

ツールバーにオリジナルボタンを追加する方法

それでは試しに自分専用のボタンを追加してみましょう。

「引用開始」(<blockquote>)ボタンの横に、「Code Block」というオリジナルボタンを追加して、このボタンを押すと文字列を<pre><code>・・・</code></pre>で囲んでくれるようにしたいと思います。

１．archetype_editor.tmplをalt-tmplディレクトリにコピー

ツールバーのHTMLが書かれているファイルは、"tmpl/cms/include/archetype_editor.tmpl"です。
これを、alt-tmplディレクトリの下にコピーします。

tmpl/cms/include/archetype_editor.tmpl
↓コピー
alt-tmpl/cms/include/archetype_editor.tmpl

２．archetype_editor.tmplを編集する

alt-tmpl/cms/include/archetype_editor.tmpl
を編集して、下記のように１行追加します。

<span class="text-style">
  <button type="button" title="<__trans phrase="Begin Blockquote" escape="html">" class="command-indent toolbar button"><span class="button-label"><__trans phrase="Begin Blockquote"></span></button>
  <button type="button" title="<__trans phrase="Code Block" escape="html">" class="command-precode toolbar button-custom"><span class="button-label"><__trans phrase="Code Block"></span></button>

これで、管理画面上に新しいボタンが現れます。

３．Textarea.jsを編集する

ボタンを追加しただけではまだ動作しません。
Javascriptコードを編集して機能をつけてあげましょう。
mt-static/js/common/Editor/Textarea.js
を編集して、下記の行を追加します。

case "indent":
    this.setSelection( "<blockquote>" + text + "</blockquote>" );
    break;

case "precode":
    this.setSelection("<pre><code>" +  text + "</code></pre>");
    break;

case "insertUnorderedList":

これで、「CodeBlock」ボタンを押すと、選択した文字列を<pre><code>・・・</code></pre>で囲んでくれるようになります。

↓こんな感じになります。ちょっと見た目がアレですが。。

いかがでしたか？

参考

ＭＴ：管理画面のカスタマイズ（alt-tmplの活用）

カテゴリ: MovableType