【第2回】ボタンの追加と削除 - MTAppjQuery で Movable Type の TinyMCE をカスタマイズ | MTAppjQuery

はじめに

この記事は弊社の Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何？という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

今回の概要

この記事は「MTAppjQuery で Movable Type の TinyMCE をカスタマイズ」の第2回です。

今回は Movable Type の TinyMCE のボタンを追加したり削除したりする方法をご紹介します。

既存のボタンを調べる

まずは既存のボタンの設定がどのようになっているかを見てみましょう。

１行目のボタン（ボタンが並んでいる行のことを「ツールバー」といいます）の設定、２行目のツールバーの設定は、それぞれ下記のプロパティに格納されています。

1行目：MT.Editor.TinyMCE.config.plugin_mt_wysiwyg_buttons1
2行目：MT.Editor.TinyMCE.config.plugin_mt_wysiwyg_buttons2

デフォルトでセットされている内容は下記の通りです。

// plugin_mt_wysiwyg_buttons1
'bold italic underline strikethrough | blockquote bullist numlist hr | link unlink | mt_insert_html mt_insert_file mt_insert_image | table'

// plugin_mt_wysiwyg_buttons2
'undo redo | forecolor backcolor removeformat | alignleft aligncenter alignright indent outdent | formatselect | mt_fullscreen'

この bold italic のようなワードがボタンを表しています。

それでは実際にカスタマイズしていましょう。

「アセットの挿入」「画像の挿入」ボタンを無くす

まずは「アセットの挿入」「画像の挿入」というアセット関連のボタンをなくしてみましょう。

「アセットの挿入」と「画像の挿入」ボタンは、１行目にありますので plugin_mt_wysiwyg_buttons1 に設定されています。この中の「mt_insert_file」「mt_insert_image」が「アセットの挿入」と「画像の挿入」に該当します。

したがって、plugin_mt_wysiwyg_buttons1 の設定からそれらを削除したもので既存の設定を上書きすればOKです。

具体的には下記の通りです。

<mt:SetVarBlock name="js_include" append="1">
    <script>
        let mtappCustomConfig = {
            plugin_mt_wysiwyg_buttons1: 'bold italic underline strikethrough | blockquote bullist numlist hr | link unlink | mt_insert_html | table'
        };
        Object.assign(MT.Editor.TinyMCE.config, mtappCustomConfig);
    </script>
</mt:SetVarBlock>

これでボタンが二つ消せました。

ボタンを１行にまとめる

次は下図の赤枠のボタンだけを残し、それらを１行にまとめてみましょう。

コードは下記の通りです。

<mt:SetVarBlock name="js_include" append="1">
    <script>
        let mtappCustomConfig = {
            plugin_mt_wysiwyg_buttons1: 'bold italic underline strikethrough | blockquote bullist numlist hr | link unlink | undo redo | forecolor backcolor removeformat',
        };
        delete MT.Editor.TinyMCE.config.plugin_mt_wysiwyg_buttons2;
        Object.assign(MT.Editor.TinyMCE.config, mtappCustomConfig);
    </script>
</mt:SetVarBlock>

ポイントは、

delete MT.Editor.TinyMCE.config.plugin_mt_wysiwyg_buttons2;

の部分です。このようにして２行目のボタンの設定を丸ごと消しています。

MT のエディタに表示されていないボタンを追加する

TinyMCE では、デフォルトではもっとたくさんのボタンが利用できます。TinyMCE コアがサポートしているボタンは、以下のドキュメントで確認できます。

Toolbar Buttons Available for TinyMCE | TinyMCE Documentation

また、コンソールに下記を打ち込むと、現在のMTの TinyMCE で利用できる全てのボタンをオブジェクトの形で確認することも可能です。

tinyMCE.activeEditor.ui.registry.getAll().buttons

なお、コンソールに表示される中の mt_source_mode を除く mt_source_ で始まるものは入力フォーマットが「なし」や「改行を変換」用のボタンなので、リッチエディタでは使えません。

さて、試しに MT の TinyMCE で利用できるボタンをすべて１行目のツールバーに表示してみましょう。

<mt:SetVarBlock name="js_include" append="1">
    <script>
        let mtappCustomConfig = {
            plugin_mt_wysiwyg_buttons1: 'numlist | bullist | media | link | openlink | unlink | fullscreen | table | tableprops | tabledelete | tablecellprops | tablemergecells | tablesplitcells | tableinsertrowbefore | tableinsertrowafter | tabledeleterow | tablerowprops | tableinsertcolbefore | tableinsertcolafter | tabledeletecol | tablecutrow | tablecopyrow | tablepasterowbefore | tablepasterowafter | tablecutcol | tablecopycol | tablepastecolbefore | tablepastecolafter | tableinsertdialog | tablecellvalign | tablecellborderwidth | tablecellborderstyle | tablecellbackgroundcolor | tablecellbordercolor | tablecaption | tablerowheader | tablecolheader | quickimage | quicktable | mt_insert_html | mt_insert_image | mt_insert_file | mt_source_mode | mt_fullscreen | alignleft | aligncenter | alignright | alignjustify | alignnone | bold | italic | underline | strikethrough | subscript | superscript | h1 | h2 | h3 | h4 | h5 | h6 | copy | help | selectall | newdocument | print | cut | paste | removeformat | remove | hr | blockquote | undo | redo | forecolor | backcolor | visualaid | outdent | indent | lineheight | pastetext',
        };
        delete MT.Editor.TinyMCE.config.plugin_mt_wysiwyg_buttons2;
        Object.assign(MT.Editor.TinyMCE.config, mtappCustomConfig);
    </script>
</mt:SetVarBlock>

すごいことになりましたね。これらのボタンのうち、必要なボタンをデフォルトのツールバーに加えていけばいいわけです。

「テキストとして貼り付け」ボタンを追加

例として、デフォルトのエディタの１行目のツールバーの先頭に「テキストとして貼り付け」ボタンを追加します。コードは下記のようになります。

<mt:SetVarBlock name="js_include" append="1">
    <script>
        let mtappCustomConfig = {
            plugin_mt_wysiwyg_buttons1: `pastetext ${MT.Editor.TinyMCE.config.plugin_mt_wysiwyg_buttons1}`,
        };
        Object.assign(MT.Editor.TinyMCE.config, mtappCustomConfig);
    </script>
</mt:SetVarBlock>

pastetextというのが「テキストとして貼り付け」ボタンを表しています。

少し JavaScript の話になりますが、

`pastetext ${MT.Editor.TinyMCE.config.plugin_mt_wysiwyg_buttons1}`

という部分は JavaScript のテンプレートリテラルという書き方で、テンプレートリテラルの中では ${foo} のようにして foo 変数の内容を展開することができます。

つまり ${MT.Editor.TinyMCE.config.plugin_mt_wysiwyg_buttons1} とすれば、元のツールバーの値をそのまま使うことができます。

余談：「テキストとして貼り付け」ボタンについて

余談ですが、この「テキストとして貼り付け」ボタンは結構便利で、クリップボードにコピーしたテキストがHTMLなどの情報を含んでいるとき、そういうものは取り除いてテキストだけをペーストできるようになります。

例えば、ウィキペディアの「Movable Type」の「概要」の一段落目をコピーします（下図）。

これをそのまま TinyMCE にペーストすると下図のようにリンクなども含めた情報がペーストされてしまいます。

もちろんこれはこれで便利な時もありますが、例えばビジネスシーンでは欠かせない Microsoft Word から情報を貼り付けた時も、Word の装飾情報をそのまま貼り付けてしまいます。これがリッチエディタによるページ崩れの始まりですね。

このようなときは、「テキストとして貼り付け」ボタンをクリックしてONにした状態で普通にペーストすると、装飾情報は取り除いてプレーンテキストとして貼り付けることができます。

ちなみに、このボタンを入れなくても Mac の場合は Command + Shift + V（Windows はおそらく Control + Shift + V）で貼り付ければプレーンテキストとして貼り付けできます。この辺りは運用者のリテラシー次第で使い分けましょう。

今回は以上となります。

【第2回】ボタンの追加と削除 - MTAppjQuery で Movable Type の TinyMCE をカスタマイズ