Editor.js [Header] 見出し(h1 h2 h3..)ツール

記事作成日: 2022-09-21

blockをh1,h2,h3などの見出しにする｢Heading Tool｣というツールの使い方です｡

インストールは以下のページを参考にしてください｡

https://github.com/editor-js/header

使い方

Editor.jsのinitial configのtoolsプロパティにHeading Toolを追加します｡

editor = new EditorJS({
	holder: 'editorjs',
	tools: {
		header: Header,
	}
})

editor本体に追加するtoolsをHeaderというクラス名で記述します｡

では､機能を見ていきます｡

見出しの設定

[+]ボタンをクリックすると､新たに[H] HeadingツールがToolboxに追加されます｡

それをクリックし､文字を入力すると既に見出し(h2)が適用されます｡

私はh2を一番良く使うのでこのままでいいのですが､configでデフォルトの設定を変更することもできます｡

見出しの変更

ブロック内でTabキーを押すとインラインツールバーにH1からH6のボタンが追加されています｡ お好みのボタンを押すと､見出しが変更されます｡

カスタマイズ

const editor = new EditorJS({
	holder: 'editorjs',
	tools: {
		header : {
			class: Header,
			config: {
				placeholder: 'Enter a header',
				levels: [1, 2, 3],
				defaultLevel: 1,
				shortcut: 'CMD+SHIFT+H',
			}
		}
	}
})

プレイスホルダー

configプロパティのplaceholderプロパティに設定しておくと､プレイスフホルダーが表示されます｡

使用するヘッダーレベル

levels: [1, 2, 3]とすることで､使用するのをh1,h2,h3に限定することができます｡

defaultLevel

標準のレベルを設定できます｡

キーボードショートカット

一応載せておきましたが､私の環境では機能しませんでした｡バグっぽいです｡

https://github.com/codex-team/editor.js/issues/2112

出力データの構造

{
  "type": "header",
  "data": {
    "text": "Editor.jsとは",
    "level": 2
  }
}

typeがheaderで､textに入力したテキスト､lebelにh2の意味の2が出力されます｡

参考リンク

• https://github.com/editor-js/header