Provide custom configuration

Let's suppose we want to allow user of our Simple Image Tool to pass own placeholder for URL field. There is a config property of Editor Configuration for that purposes.

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

<!-- html code --> <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 somewhere and access from other 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.  

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 own Block Tool. Try to experiment 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 own Inline Tools — plugins for the Inline Formatting Toolbar, such as a Marker, Inline Code, etc. Follow the «Creating an Inline Tools» guide series to hit this target. 

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