editor.js icon indicating copy to clipboard operation
editor.js copied to clipboard

❓ How to change tool order?

Open AlbinoGeek opened this issue 3 years ago • 10 comments

Question

How do I change the order of tools?

Context

For some reason, every tool is listed AFTER "Text" EXCEPT "Link".

So, there clearly is some way to change the order of tools.

But it's not documented in the Tool Options:

https://editorjs.io/getting-started#available-tools-options

What I've tried

  1. Changing the order of tools as defined does not effect the rendered order.
  2. Changing the name of the tools does not effect the order (it's not alphabetical.)

AlbinoGeek avatar Apr 30 '22 22:04 AlbinoGeek

Please, add more details. Are you talking about Block Tools or Inline Tools? Or Block Tunes? Maybe your configuration and some screenshots will help

neSpecc avatar May 01 '22 08:05 neSpecc

Please, add more details. Are you talking about Block Tools or Inline Tools? Or Block Tunes? Maybe your configuration and some screenshots will help

Porque no los dos? (meme that poorly translates to "why not both?")

But yes, let's start with Block Tunes.

image

It's "sort of alphabetical but not really, because Link is always first and followed by Text."

Here's my tool configuration:

      {
        header: {
          class:         Header,
          inlineToolbar: ['link'],
          tunes:         ['alignmentTune']
        },
        paragraph: {
          class:         Paragraph,
          inlineToolbar: true,
          tunes:         ['alignmentTune']
        },
        list: {
          class:         NestedChecklist,
          inlineToolbar: true,
          tunes:         ['alignmentTune']
        },
        link: {
          class:  LinkTool,
          tunes:  ['alignmentTune'],
          config: {
            endpoint: '/api/fetchUrl',
          }
        },
        image: {
          class:         Image,
          inlineToolbar: ['link'],
          tunes:         ['alignmentTune']
        },
        embed: {
          class:         Embed,
          inlineToolbar: true
        },
        table: {
          class:  Table,
          config: {
            rows: 2,
            cols: 3,
          },
          inlineToolbar: true
        },
        alignmentTune: {
          class:  AlignmentTuneTool,
          config: {
            blocks: {
              header: 'center',
              image:  'center',
            }
          },
        }
      }

AlbinoGeek avatar May 01 '22 09:05 AlbinoGeek

Any update on this?

theleonwei avatar Jan 18 '23 18:01 theleonwei

I have the same problem.

CKylinMC avatar Aug 10 '23 05:08 CKylinMC