MTAppjQuery v3 を使って Movable Type 8 の TinyMCE の段落フォーマットのドロップダウンをカスタマイズする方法をご紹介します。
この記事は弊社の Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何?という方は弊社の「MTAppjQuery」の製品ページをご覧ください。
この記事は「MTAppjQuery で Movable Type の TinyMCE をカスタマイズ」の第3回です。
今回は Movable Type の TinyMCE の段落フォーマットのドロップダウンをカスタマイズする方法をご紹介します。「段落フォーマット」とは下図の赤枠部分になります。
もしかしたら「ブロックフォーマット」とも言うのかもしれませんが、ブロックというとブロックエディタと混同しそうなので、ここではあえて「段落フォーマット」と呼びます。
初めに今回の完成系を見てみましょう。
デフォルトの選択肢を次のように変更しました。
カスタマイズ前 | カスタマイズ内容 | カスタマイズ後 |
---|---|---|
段落 | 変更なし | 段落 |
見出し 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>
すると下図のようになりました。
このように、段落フォーマットの設定は「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つの項目が追加されました。
上記のコードを見て分かるとおり、新しいフォーマットの定義は「formats
」オプションで行います。
formats
オプションはオブジェクトの形で設定し、そのキーを block_formats
の方に渡して表示させます。
しかし、この段階では、追加した項目を選択しても、ソースコード上はきちんと設定通りになっていますが、TinyMCE エディタの表示上は何も変わりません。
<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し</h4>
<div class="heading-border-bottom">下線見出し(青)</div>
<div class="balloon">吹き出し</div>
<pre>const message = 'ソースコード';<br>alert(message);</pre>
新たに追加したフォーマットにスタイルを反映させるには、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>
これで完成です。
今回は以上となります。
次回は、formats
オプションの定義の仕方について詳しく見ていきたいと思います。