Инструменты форматирования

С помощью инструментов можно изменять текстовое содержимое блоков. Как и в случае с блоками, вы можете воспользоваться готовыми вариантами, внести изменения, используя расширяемость классов, или создать собственные инструменты. Однако стоит отметить, что у инструментов нет дополнительных настроек, которые позволяли бы быстро адаптировать их под конкретные задачи.

Базовое использование

Подключайте и используйте инструменты форматирования в конфигурации редактора.

import Texditor from 'texditor';
import {
  BoldTool,
  ItalicTool,
  InlineCodeTool,
  LinkTool,
  MarkerTool,
  SubscriptTool,
  SuperscriptTool,
  ClearFormattingTool
} from 'texditor/entities/tools';
import { H1 } from 'texditor/entities/blocks';

const editor = new Texditor({
  // Идентификатор html-элемента
  handle: 'texditor',
  // Список инструментов
  tools: [
    BoldTool.setup({
      tagName: 'strong',
      iconWidth: 16,
      iconHeight: 16
      // ... другие параметры из основной и базовой модели
    }),
    ItalicTool,
    InlineCodeTool,
    LinkTool,
    MarkerTool,
    SubscriptTool,
    SuperscriptTool,
    ClearFormattingTool,
    //... или пользовательские варианты
  ],

  /* 
  Здесь мы можем использовать необязательную опцию, 
  чтобы выбрать инструменты, которые будут отображаться в блоке,
  основываясь на их символьных кодах.
  */
  blocks: [
    H1.setup({
      availableTools: [
        "link",
        "subscript",
        "superscript",
        "clearFormatting"
      ]
    })
  ],
});

Создание пользовательских инструментов форматирования

Как и с любой базовой моделью, редактор позволяет легко создавать пользовательские сущности инструмента форматирования.

Javascript

import { ToolModel } from 'texditor/core/models';

// Пример инструмента форматирования
export default class CustomBoldTool extends ToolModel {
  configure() {
    return {
      name: 'bold',
      tagName: 'b',
      icon: { raw: '<svg>...</svg>' },
      iconWidth: 16,
      iconHeight: 16,
      /** 
       * Этот параметр блокирует возможность форматирования внутри текущего элемента 
       * и предотвращает использование других методов форматирования, разделяя элемент на отдельные фрагменты.  
       */
      override: false,
      // ... другие параметры из базовой модели
    };
  }

  // Необязательный метод, который по умолчанию выполняет функцию this.format().
  onClick(evt) {
    // Выполним принудительное форматирование, которое очистит все элементы на пути и создаст HTML-элемент с именем тега 'tagName'.
    this.forcedFormat();
  }

  // Другие методы из основной модели "ToolModel" и базовой 'BaseModel' ...
}

Typescript

import { type ToolModelConfig } from 'texditor';
import { ToolModel } from 'texditor/core/models';

// Пример инструмента форматирования
export default class CustomBoldTool extends ToolModel {
  protected configure(): Partial<ToolModelConfig> {
    return {
      name: 'bold',
      tagName: 'b',
      icon: { raw: '<svg>...</svg>' },
      iconWidth: 16,
      iconHeight: 16,
      /** 
       * Этот параметр блокирует возможность форматирования внутри текущего элемента 
       * и предотвращает использование других методов форматирования, разделяя элемент на отдельные фрагменты.  
       */
      override: false,
      // ... другие параметры из базовой модели
    };
  }

  // Необязательный метод, который по умолчанию выполняет функцию this.format().
  protected onClick(evt: MouseEvent): void {
    // Выполним принудительное форматирование, которое очистит все элементы на пути и создаст HTML-элемент с именем тега 'tagName'.
    this.forcedFormat();
  }

  // Другие методы из основной модели "ToolModel" и базовой 'BaseModel' ...
}