Provide custom configuration

Let's suppose we want to allow a user of our Simple Image Tool to pass his own placeholder for the URL field. There is a config property of the Editor Configuration tools.<toolName> object for that purpose.

Open example.html and add a config property with any fields you want. In our example, there is a placeholder field.

<script> const editor = new EditorJS({ autofocus: true, tools: { image: { class: SimpleImage, inlineToolbar: true, + config: { + placeholder: 'Paste image URL' + } } }, // ... data field }); // ... save button handler </script>

This object will be passed to the class's constructor as config property. You can save it somewhere and access it from another method, for example, render.

class SimpleImage { // ... static get toolbox // ... static get pasteConfig // ... static get sanitize - constructor({data, api}){ + constructor({data, api, config}){ this.api = api; + this.config = config || {}; // ... this.data // ... this.wrapper // ... this.settings } render(){ this.wrapper = document.createElement('div'); this.wrapper.classList.add('simple-image'); if (this.data && this.data.url){ this._createImage(this.data.url, this.data.caption); return this.wrapper; } const input = document.createElement('input'); - input.placeholder = 'Paste an image URL...'; + input.placeholder = this.config.placeholder || 'Paste an image URL...'; input.addEventListener('paste', (event) => { this._createImage(event.clipboardData.getData('text')); }); this.wrapper.appendChild(input); return this.wrapper; } // ... _createImage // ... save // ... validate // ... renderSettings // ... _toggleTune // ... _acceptTuneView // ... onPaste }

Try to add new Block and check the placeholder of URL input — it should have passed text.

☝️

Don't forget to describe properties supported by your configuration at the README.md of you Tool.

Use i18n API for all UI texts

Even if you will support overriding of some of your tool's UI texts via config, it's better to wrap all the string with the t() method of the I18nAPI. It will allow users to localize all text via one dictionary.

class SimpleImage { // ... constructor({data, api, config}){ this.api = api; this.config = config || {}; //... } render(){ //... - input.placeholder = this.config.placeholder || 'Paste an image URL...'; + input.placeholder = this.api.i18n.t(this.config.placeholder || 'Paste an image URL...'); // ... } //... }

Our tool is done. You can view the final result of created tool or more complicated version of Simple Image Tool.

Where to go from here

After passing the Creating Block Tool guide series, you are able to create your own Block Tool. Try experimenting with more complex UI and functionality.

All supported methods for Block Tools are described at the Tools API section. More information about Editor.js Core API you can find here.

Editor.js also allows you to create your own Inline Tools — plugins for the Inline Formatting Toolbar, such as a Marker, Inline Code, etc. Follow the «Creating an Inline Tool» guide series to hit this target.

If you want to contribute cool Tools you made, please read these instructions.