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

今回の概要

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

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

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

今回の完成系

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

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

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

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

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

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回】必要な基礎知識と準備」をご覧ください。

    
        let mtappCustomConfig = {
            block_formats: '段落=p;大見出し=h2;中見出し=h3;小見出し=h4;ソースコード=pre'
        };
        Object.assign(MT.Editor.TinyMCE.config, mtappCustomConfig);
    

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

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

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

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

• Content formatting options | TinyMCE Documentation

新しい項目を追加

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

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

    
        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);
    

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

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

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

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

大見出し中見出し小見出し下線見出し(青)吹き出しconst message = 'ソースコード';
alert(message);

新たに追加したフォーマットにスタイルを反映させるには、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 エディタ内で読み込まれるようになります。

    
        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);
    

これで完成です。

今回は以上となります。

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