Расширенная конфигурация

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

Блоки

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

import Texditor from '@texditor/editor';
import { 
  Gallery, 
  Files, 
  H2, 
  List, 
  Paragraph 
} from '@texditor/editor/blocks';

const editor = new Texditor({
  // Идентификатор html-элемента
  handle: 'texditor',
  // Список моделей блоков
  blockModels: [
    Paragraph,
    List,

    // Настроим простой блок
    H2.setup({
      // Плейсхолдер (если данные не заполнены)
      placeholder: 'Мой заголовок',
      // Параметры базовой санитизации
      sanitizerConfig: {
        elements: ['a', 'sup', 'sub']
        // ...
      }
    }),

    /*
      На примере блока галереи, который обладает 
      собственными параметрами конфигурации.
    */
    Gallery.setup({
      mimeTypes: [
        "image/png", 
        "image/jpeg", 
        "video/mp4", 
        "image/webp"
      ],
      multiple: true,
      uploadLabelMessage: "Загружайте свои файлы в форматах .png, .jpg, .mp4 или .gif",
      showOnlyWhenEmpty: true,
      stylesLtr: "left",
      styles: [],
      defaultStyle: 'slider',
      ajaxConfig: {
        url: "https://texditor.priveted.com/api/upload",
        options: {
          data: {
            hello: 33
          }
        }
      }
    }),
    
    /* 
     Несмотря на то, что этот элемент будет функционировать как блок,
     для загрузки файлов потребуется настройка, аналогичная той, 
     что используется в блоке «Галерея». 
    */
    Files,

    // ... Любой кастомный блок, соответствующий модели BlockModel и интерфейсу BlockModelInterface.
  ]
});

Чтобы более детально настроить каждый блок и узнать о его специфике, рекомендуется ознакомиться с API.

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

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

import Texditor from '@texditor/editor';
import { Undo, Redo, SelectionMode } from "'@texditor/editor/extensions";

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

Инструменты

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

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

const editor = new Texditor({
  // Идентификатор html-элемента
  handle: 'texditor',
  // Список инструментов
  tools: [
    BoldTool,
    ItalicTool,
    InlineCodeTool,
    LinkTool,
    MarkerTool,
    SubscriptTool,
    SuperscriptTool,
    ClearFormatingTool,
    //... или кастомные варианты
  ],

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

Расширения

Расширения в редакторе предназначены для добавления функций на панель расширений. С их помощью можно реализовать как стандартные операции — отмену (Undo) и повтор (Redo), так и любые кастомные действия.

import Texditor from '@texditor/editor';
import { Undo, Redo, SelectionMode } from "'@texditor/editor/extensions";

const editor = new Texditor({
  // Идентификатор html-элемента
  handle: 'texditor',
  extensions: [
    Undo,
    Redo, 
    SelectionMode,
    //... или кастомные варианты
  ],
});

Локалиция

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

import Texditor from '@texditor/editor';
import { RuLocale, EnLocale} from "@texditor/editor/locales";
// Ваш собственный языковой пакет
import CustomFrLocale from '../path/to/locales/fr'

const editor = new Texditor({
  // Идентификатор html-элемента
  handle: 'texditor',
  // Необязательный параметр, если не используется локализация, отличная от "en"
  locale: "ru"
});

// Регистрируем языковой пакет
editor.i18n.setLocale("ru", RuLocale);
// Предустановленный, не требует регистрации
editor.i18n.setLocale("en", EnLocale);
// Используйте собственный языковой пакет
editor.i18n.setLocale("fr", CustomFrLocale);