editor.js/docs/tools-inline.md

Tools for the Inline Toolbar

Similar with Tools represented Blocks, you can create Tools for the Inline Toolbar. It will work with selected fragment of text. The simplest example is bold or italic Tools.

Base structure

First of all, Tool's class should have a isInline property (static getter) set as true.

After that Inline Tool should implement the render method.

• render() — returns Tool's visual representation and logic

Also, you can provide optional methods:

• sanitize() — sanitizer configuration

At the constructor of Tool's class exemplar you will accept an object with the API as a parameter.

---

render()

Method that returns Menu Config for the Inline Toolbar

Parameters

Method does not accept any parameters

Return value

type	description
MenuConfig	configuration object for the tool's button and behavior

Example

render(): MenuConfig {
  return {
    icon: '<svg>...</svg>',
    title: 'Bold',
    isActive: () => {
        // check if current selection is bold
    },
    onActivate: () => {
        // toggle bold state
    }
  };
}

---

static get sanitize()

We recommend to specify the Sanitizer config that corresponds with inline tags that is used by your Tool. In that case, your config will be merged with sanitizer configuration of Block Tool that is using the Inline Toolbar with your Tool.

Example:

If your Tool wraps selected text with <b> tag, the sanitizer config should looks like this:

static get sanitize() {
  return {
    b: {} // {} means clean all attributes. true — leave all attributes
  }
}

Read more about Sanitizer configuration at the Tools#sanitize

Specifying a title

You can pass your Tool's title via title static getter. It can be used, for example, in the Tooltip with icon description that appears by hover.

export default class BoldInlineTool implements InlineTool {
  /**
   * Specifies Tool as Inline Toolbar Tool
   *
   * @return {boolean}
   */
  public static isInline = true;

  /**
   * Title for hover-tooltip
   */
  public static title: string = 'Bold';

  // ... other methods
}