Enable Inline Toolbar

In this short chapter we will learn how to enable Inline Formatting Toolbar for Caption field of our Tool.

Make contenteditable instead of inputs

At first, we need to replace an input with content editable div to allow user modify a caption markup:

_createImage(url, captionText){ const image = document.createElement('img'); const caption = document.createElement('div'); image.src = url; caption.contentEditable = true; caption.innerHTML = captionText || ''; this.wrapper.innerHTML = ''; this.wrapper.appendChild(image); this.wrapper.appendChild(caption); }

And at the save method:

save(blockContent){ const image = blockContent.querySelector('img'); const caption = blockContent.querySelector('[contenteditable]'); return { url: image.src, caption: caption.innerHTML || '' } }

And support it in CSS too:

.simple-image input, .simple-image [contenteditable] { // styles }

To activate or not to activate the Inline Formatting Toolbar — is the decision of your Tools' user. So this options configured outside the source of Tool's code.

Open example.html and find a tools property where our Tool is connected. Here is a place to make some configuration. To enable Inline Toolbar, set inlineToolbar option as true.

<script> const editor = new EditorJS({ autofocus: true, tools: { image: { class: SimpleImage, inlineToolbar: true } }, // ... data }); // ... saving button handler </script>

After that, try to select some fragment of a caption field — you will see an Inline Toolbar with all available Inline Tools.

Let's suppose you want only Link Tool at the Inline Toolbar. That can be set by the same option:

<script> const editor = new EditorJS({ autofocus: true, tools: { image: { class: SimpleImage, inlineToolbar: ['link'] } }, // ... data }); // ... saving button handler </script>

☝️

Note.

Names of Tools in inlineToolbar is the keys of Inline Tools plugins that used in tools property of initial config. There are three built-in Inline Tools: link, bold, italic.

In next part we will learn how to create a Block Settings panel to manipulate our Image's view options:

Select an Image

Enable Inline Toolbar

Make contenteditable instead of inputs

Enable Inline Toolbar

Configure Tools at Inline Toolbar