Override default tools icon and tooltip text

rubenjimenez commented 4 years ago

Hi,

Is there any way to modify the default icon and tooltip text when you load the tool in the editor config? Like the "placeholder" option or something like that. The main problem is the default editorjs language. Our clients need the editorjs to be in spanish and we don't want to modify each block by hand.

tools: {
    header: {
        class: Header,
        inlineToolbar: true,
        config: {
            placeholder: 'Write a header'
        }
    }
}

On the other hand, the icons used in all the available blocks, are they listed somewhere? We're developing some blocks and we'd like to keep the icons style but we don't find the public list or the palette to check if there're more to use in custom blocks.

Thanks!

Farrien commented 4 years ago

I think this is important and necessary ability. Devs are russian like me but they forgot about localization to our lang.

neSpecc commented 4 years ago

You can override a title and icon through the toolbox property. https://editorjs.io/getting-started#available-tools-options

const editor = new EditorJS({ 
 // config  ... 
  tools: { 
    header: {
      class: Header, 
      toolbox: {
        title: 'My Header',
        icon: '<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-43-30-56 30-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/></svg>'
      }
    }, 
  }, 
})

codex-team / editor.js

Override default tools icon and tooltip text #1024