Действия с блоками

Действия с блоками открывают широкие возможности для их обработки. Вы можете удалять, создавать новые блоки, конвертировать и перемещать их, а также добавлять собственные уникальные функции.

Добавление действий блока

Хоть действия блока и являются неотъемлемой частью редактора, по умолчанию они не подключаются автоматически — их необходимо внедрять в конфигурацию редактора вручную.

import Texditor from 'texditor';
import {     
  CreateAction, 
  ConvertAction, 
  DeleteAction, 
  MoveUpAction, 
  MoveDownAction
} from "'texditor/entities/actions";

const editor = new Texditor({
  // Идентификатор html-элемента
  handle: 'texditor',
  actions: [
    CreateAction.setup({
      visibleTitle: false
      // ... другие параметры из основной и базовой модели
    }), 
    ConvertAction, 
    DeleteAction, 
    MoveUpAction, 
    MoveDownAction,
    //... или пользовательские варианты
  ],
});

Создание пользовательских действий блока

В разработке часто бывает недостаточно стандартных методов — и лучшим решением становится создание собственных пользовательских действий блока для максимальной расширяемости и полного контроля над его поведением.

Javascript

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

// Пример удаления блока с подтверждением
export default class MyCustomDeleteAction extends ActionModel {
  configure() {
    return {
      name: 'deleteAction', // Кодовое имя
      translation: 'deleteAction', // Ключ перевода
      icon: { raw: '<svg>...</svg>' },
      confirm: true, // Подтверждаем действие
      // ... другие параметры из базовой модели
    };
  }

  onClick() {
    const { blockManager } = this.editor;
    blockManager.removeBlock();
  }

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

Typescript

import { ActionModel } from 'texditor/core/models';
import { type ActionModelConfig } from 'texditor';

// Пример удаления блока с подтверждением
export default class MyCustomDeleteAction extends ActionModel {
  protected configure(): Partial<ActionModelConfig> {
    return {
      name: 'deleteAction', // Кодовое имя
      translation: 'deleteAction', // Ключ перевода
      icon: { raw: '' },
      confirm: true, // Подтверждаем действие
      // ... другие параметры из базовой модели
    };
  }

  protected onClick(): void {
    const { blockManager } = this.editor;
    blockManager.removeBlock();
  }

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