2022.03.14
MTブロックエディタでカスタムブロックを作る
最近の案件で、MTブロックエディタを使用しました。
「MovableType.net 活用ブログ」の「ブロックエディタ」を参考にすれば、JSの知識が乏しくても簡単に作成できました。
https://movabletype.net/blog/blockeditor/
が、カスタムスクリプトで class つきの見出しを作成するリファレンスがありませんでした。
ですので、サンプルを載せておきます。
カスタムスクリプトで class つきの見出しのカスタムブロックの作成する
| 識別子 | heading |
|---|---|
| ブロック | ・ブロック …テキスト(複数行) ・ラベル …見出しテキスト ・説明 …なし ・クラス名 …text ・ブロック要素 …p ・フォーマット …改行を変換 ・規定値 …なし |
| ・ブロック …ドロップダウン ・ラベル …見出しレベル ・説明 …なし ・クラス名 …level ・ブロック要素 …p ・オプション H2 H3 H4 H5 H6 ・規定値 …H2 |
|
| ・ブロック …テキスト ・ラベル …ID ・説明 …なし ・クラス名 …id ・ブロック要素 …p ・規定値 …なし |
|
| カスタムスクリプト | ※後述 |
| コンテナ要素で包む | チェックなし |
| ブロックの追加と削除 | チェックなし |
| プレビューの表示 | チェックあり |
カスタムスクリプト
全角＜＞は半角にしてください。
JSは得意ではないので、もっとよい記述方法があれば、教えてください！
＜script＞
document.addEventListener('DOMContentLoaded', async () => {
if (document.body.dataset.hasCompiledHtml) {
return;
}
let text = document.querySelector('.text').innerHTML;
let level = document.querySelector('.level').textContent;
let id = document.querySelector('.id').textContent;
let tag = '';
let style = '';
if (level.match(/H2/)) {
tag = 'h2';
style = 'title--level2';
} else if (level.match(/H3/)) {
tag = 'h3';
style = 'title--level3';
} else if (level.match(/H4/)) {
tag = 'h4';
style = 'title--level4';
} else if (level.match(/H5/)) {
tag = 'h5';
style = 'title--level5';
} else if (level.match(/H6/)) {
tag = 'h6';
style = 'title--level6';
}
if ( id ) {
id = ' id="' + id + '"';
} else {
id = '';
}
MTBlockEditorSetCompiledHtml(`<${tag} class="${style}"${id}>${text}</${tag}>`);
});
＜/script＞
MTブロックエディタ、カスタムブロックの注意点
・「テキストブロック」や「表」のボタンは変更できない。
・カスタムブロックでもインラインでの文字サイズ変更はできない。
・カスタムブロックでも表の中に画像を入れられない。
・「画像」にリンクを設定できない。
バナーなどは、専用のカスタムブロックを作成する必要がある。
・グリッドのような入れ子のカスタムブロックは、長くなるとプレビュー表示ができない場合がある。
そしてとても編集しづらい。
