【第3回】段落フォーマットのドロップダウンをカスタマイズ - MTAppjQuery で Movable Type の TinyMCE をカスタマイズ

MTAppjQuery v3 を使って Movable Type 8 の TinyMCE の段落フォーマットのドロップダウンをカスタマイズする方法をご紹介します。

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

はじめに

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

今回の概要

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

今回は Movable Type の TinyMCE の段落フォーマットのドロップダウンをカスタマイズする方法をご紹介します。「段落フォーマット」とは下図の赤枠部分になります。

もしかしたら「ブロックフォーマット」とも言うのかもしれませんが、ブロックというとブロックエディタと混同しそうなので、ここではあえて「段落フォーマット」と呼びます。

Clean Shot 2024 09 17 at 14 01 46 2x

今回の完成系

初めに今回の完成系を見てみましょう。

Clean Shot 2024 09 18 at 11 25 25 2x

デフォルトの選択肢を次のように変更しました。

カスタマイズ前カスタマイズ内容カスタマイズ後
段落変更なし段落
見出し 1削除 
見出し 2名称変更大見出し
見出し 3名称変更中見出し
見出し 4名称変更小見出し
見出し 5削除 
見出し 6削除 
 新規追加下線見出し(青)
 新規追加吹き出し
書式設定済み名称変更ソースコード

それではカスタマイズ方法を見ていきましょう。

現在の設定内容を確認するには

まずはカスタマイズ前の現在の設定がどうなっているのか調べてみます。

TinyMCE エディタの入力欄にカーソルを置き、ブラウザの開発者ツールのコンソールに下記のコードを打ってみてください。

tinymce.activeEditor.getParam('block_formats');

// 出力例
// 'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre'

出力は翻訳される前のようですが、これで大体現状の設定を把握できますね。

既存の段落フォーマットをカスタマイズ

まずは既存の段落フォーマットのドロップダウンに表示される名前を変更し、不要なものは削除してみます。

以下のコードを MTAppjQuery プラグインの設定の「自由テキストエリア > head の開始タグの直後」欄に貼り付けて保存してください。カスタマイズの方法の基礎については「【第1回】必要な基礎知識と準備」をご覧ください。

<mt:SetVarBlock name="js_include" append="1">
    <script>
        let mtappCustomConfig = {
            block_formats: '段落=p;大見出し=h2;中見出し=h3;小見出し=h4;ソースコード=pre'
        };
        Object.assign(MT.Editor.TinyMCE.config, mtappCustomConfig);
    </script>
</mt:SetVarBlock>

すると下図のようになりました。

Clean Shot 2024 09 18 at 10 24 30 2x

このように、段落フォーマットの設定は「block_formats」オプションをカスタマイズすればOKです。

block_formats オプションには、「項目名=項目のキー」という1セットをセミコロン「 ; 」で繋いで設定します。

なお、もともと定義されている段落フォーマットは、以下のドキュメントで確認できます。

新しい項目を追加

次は、デフォルトにはない「下線見出し(青)」「吹き出し」という新しい項目を追加してみましょう。

次のコードで、先ほど MTAppjQuery プラグインの設定の「自由テキストエリア > head の開始タグの直後」欄に貼り付けたコードを上書きしてください。

<mt:SetVarBlock name="js_include" append="1">
    <script>
        let mtappCustomConfig = {
            formats: {
                headingBorderBottom: { block: 'div', classes: 'heading-border-bottom' },
                balloon: { block: 'div', classes: 'balloon' },
            },
            block_formats: '段落=p;大見出し=h2;中見出し=h3;小見出し=h4;下線見出し(青)=headingBorderBottom;吹き出し=balloon;ソースコード=pre'
        };
        Object.assign(MT.Editor.TinyMCE.config, mtappCustomConfig);
    </script>
</mt:SetVarBlock>

これで下図のように2つの項目が追加されました。

Clean Shot 2024 09 18 at 11 05 13 2x

上記のコードを見て分かるとおり、新しいフォーマットの定義は「formats」オプションで行います。

formats オプションはオブジェクトの形で設定し、そのキーを block_formats の方に渡して表示させます。

Clean Shot 2024 09 18 at 11 08 10 2x

しかし、この段階では、追加した項目を選択しても、ソースコード上はきちんと設定通りになっていますが、TinyMCE エディタの表示上は何も変わりません。

<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し</h4>
<div class="heading-border-bottom">下線見出し(青)</div>
<div class="balloon">吹き出し</div>
<pre>const message = 'ソースコード';<br>alert(message);</pre>
Clean Shot 2024 09 18 at 11 12 24 2x

新たに追加したフォーマットにスタイルを反映させるには、CSSを設定する必要があります。

カスタムスタイルの読み込み

まずは追加した項目のスタイルを書いた「editor.css」というファイルを作成します。ファイルの内容は次のとおりです。

.heading-border-bottom {
    margin-bottom: 2em;
    padding: 0.5em;
    color: #010101;
    background: #eaf3ff;
    border-bottom: solid 3px #516ab6;
}
.balloon {
    position: relative;
    margin-bottom: 2em;
    padding: 0.6em;
    background: #e0edff;
}
.balloon:after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #e0edff;
    width: 0;
    height: 0;
}
pre {
    padding: 1rem;
    background-color: #F2F2F2;
    font-family: 'Source Han Code JP', 'Courier New', Monaco, Consolas, monospace;
    border: 2px solid grey;
}

pre は新たに追加した項目ではありませんが、既存のスタイルを上書きしたいと思います。

このファイルをサーバー上の任意の場所にアップロードします。今回はサポートディレクトリの中に MTAppjQuery/editor.css となるように設置しました。

このファイルのURLを、次のように content_css オプションに設定してあげれば、TinyMCE エディタ内で読み込まれるようになります。

<mt:SetVarBlock name="js_include" append="1">
    <script>
        let mtappCustomConfig = {
            formats: {
                headingBorderBottom: { block: 'div', classes: 'heading-border-bottom' },
                balloon: { block: 'div', classes: 'balloon' },
            },
            block_formats: '段落=p;大見出し=h2;中見出し=h3;小見出し=h4;下線見出し(青)=headingBorderBottom;吹き出し=balloon;ソースコード=pre',
            content_css: '/cms/mt8/mt-static/support/MTAppjQuery/editor.css',
        };
        Object.assign(MT.Editor.TinyMCE.config, mtappCustomConfig);
    </script>
</mt:SetVarBlock>

これで完成です。

Clean Shot 2024 09 18 at 11 25 25 2x

今回は以上となります。

次回は、formats オプションの定義の仕方について詳しく見ていきたいと思います。

Published 2024-09-18
Updated 2024-09-18

「MTAppjQuery」カテゴリの記事一覧