Editor.js Toolのインストール

記事作成日: 2021-12-22

ブロックエディタであるEditor.jsのブロックはToolによって表現されます。Toolは独自のロジックを持つ外部のスクリプトです。例えば、Header Toolでは見出しテキストを入力できます。初期設定の状態ではParagraphブロックしか含まれていません。これはEditor.jsではそれぞれのブロックがプラグインで提供されており、ユーザが自由に拡張できるという基本コンセプトに基づいています。これらを使えるようにするには、外部からインストール（インクルード）する必要があります。

ブロックツール（プラグイン）のインストール

外部からマイアプリにスクリプトを追加します。

例：CDNから使用

<script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>

設定方法

Toolを実際に使えるようにするにはeditorインスタンスのtoolsプロパティにToolを設定します。

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

Toolsプロパティに各toolを登録することで使用可能になります。

オプションの設定

先のコードは何のオプションも指定せずにToolを設定していますが、以下のTool Optionを設定することもできます。

Option 内容
class Tool class
config ツールコンストラクタに渡されるツール固有の構成
inlineToolbar ブロックツールで使用できるインラインツールを制御
shortcut ツールのショートカット
toolbox ツールの内部ツールボックスアイコンとタイトルを書き換えるオプション

使用できるプラグインリスト

プラグインのrepositoryはこちらにあります。詳細はreadmeを読んでください。

ツール 内容
simple-image Simple Image Tool
header Header Tool
table Table constructor
warning Warning Tool
raw Raw HTML tool
quote Quote Tool
marker Marker Tool
image Image Block
list List Tool
embed Embed Tool
checklist Checklist Tool
inline-code Inline-Code Tool
code Code Tool
underline Inline tool for underlining text fragments
delimiter Delimiter plugin
personality Personality Tool
attaches Attaches Tool
link Link Tool
nested-list Multi-leveled lists
awesome-editorjs A curated list of awesome Editor.js tools
paragraph Paragraph Tool
.github  
cypress-commands Cypress commandsテスト目的のカスタムセット
footnotes-tune Footnotes Block Tune
link-autocomplete サーバーの検索を利用したbase inline link toolのアップグレード版
text-variant-tune Block Tune for text variants: Call-out, Citation, Details
editorjs-php PHP backend
audio Work in progress
simple-image-tutorial 自作Block Toolのチュートリアル
spoiler Work in progress

以下のリンクにはawesameなツールがたくさんまとめられています。

GitHub - editor-js/awesome-editorjs: 🤩 A curated list of awesome Editor.js tools, libraries and resources.

参考リンク