[MovableType]管理画面の記事作成画面のツールバーに実体参照化ボタンを追加する方法

2011/07/23

１．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="HTML Entity" escape="html">" class="command-htmlentity toolbar button-custom"><span class="button-label"><__trans phrase="HTML Entity"></span></button>

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

３．Textarea.jsを編集する

次に、Javascriptコードを編集して機能をつけてあげましょう。
mt-static/js/common/Editor/Textarea.js
を編集して、下記の行を追加します。

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


case "htmlentity":
    this.setSelection((function(s){
        return s.replace(/([<>&\"])/g, function(m0,m1) {
                return {'<': '&lt;', '>': '&gt;', '\"': '&quot;', '&': '&amp;'}[m1];
        });
    })(text));
    break;


case "insertUnorderedList":

これで、「HTMLEntity」ボタンを押すと、選択した文字列を実体参照に変換してくれます。

参考

カテゴリ: MovableType JavaScript