株式会社ぺいじず

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ブロックエディタ、カスタムブロックの注意点

・「テキストブロック」や「表」のボタンは変更できない。
 ・カスタムブロックでもインラインでの文字サイズ変更はできない。
 ・カスタムブロックでも表の中に画像を入れられない。

・「画像」にリンクを設定できない。
 バナーなどは、専用のカスタムブロックを作成する必要がある。

・グリッドのような入れ子のカスタムブロックは、長くなるとプレビュー表示ができない場合がある。
 そしてとても編集しづらい。

※現在ぺいじずでは、Movable Typeを使ってWeb制作をする仲間を募集中です。
ご興味のある方は採用情報をご確認くださいませ。

株式会社ぺいじず

私たちは、東京都で創業31年のWeb制作会社です。
長年のマニュアル制作で培われたライティングスキルを活かし、効果的なWebサイトをご提案しています。