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

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

昔あったプラグイン「EntityRefButton」(私は使ったことないですが)とほぼ同じ機能をするボタンです。
MT 5.12で動作確認済みです。
1.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
2.archetype_editor.tmplを編集する
alt-tmpl/cms/include/archetype_editor.tmpl
を編集して、下記のように1行追加します。
<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>
 
これで、管理画面上に新しいボタンが現れます。
3.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」ボタンを押すと、選択した文字列を実体参照に変換してくれます。

参考
カテゴリ:

人気記事