ФреймворкJavaScript

Параметры конфигурации Blok

Объект конфигурации, передаваемый конструктору Blok. Формально он разделён на два типа: `BlokMountOptions` — опции, фиксированные на всё время жизни экземпляра (holder, tools, i18n, колбэки, …) — и `BlokState`, «живые» поля: `readOnly` (включая `hideControls`), `hideToolbar` и `inlineToolbar`. У каждого поля `BlokState` есть документированный runtime-сеттер (`readOnly.set`, `toolbar.setHidden`, `tools.setInlineToolbar`), поэтому его изменение никогда не требует пересоздания редактора — а адаптеры React, Vue и Angular реагируют на эти props/inputs на месте. `BlokConfig = BlokMountOptions & BlokState`, так что существующий код компилируется без изменений.

Редактировать на GitHub

TypeScript

import { Blok, type BlokConfig } from '@bloklabs/core';

const config: BlokConfig = {
  holder: 'editor',
  placeholder: 'Start writing...',
  autofocus: true,
  readOnly: false,
  minHeight: 300,
};

const editor = new Blok(config);

Конфигурация

Параметр	Тип	По умолчанию	Описание
`holder`	`string \| HTMLElement`	`'blok'`	Контейнер (ID или элемент DOM)
`tools`	`Record<string, ToolConstructable \| ToolSettings>`	`{}`	Доступные блочные и строчные инструменты
`placeholder`	`string \| false`	`false`	Текст-заполнитель, показываемый в первом блоке, когда редактор пуст; false отключает его
`minHeight`	`number`	`300`	Высота в px нижней кликабельной зоны редактора
`defaultBlock`	`string`	`'paragraph'`	Тип блока по умолчанию
`data`	`OutputData \| LooseOutputData`	`undefined`	Начальные данные для отображения. Принимается нестрогий формат: значения `null` для `data`, `id` или `time` блока (частые в backend-DTO) нормализуются на границе.
`readOnly`	`boolean \| { hideControls: boolean }`	`false`	Включить режим только для чтения. Передайте `{ hideControls: true }`, чтобы также скрыть hover-тулбар, настройки блока и строчную панель. Живое поле: меняется на лету через `readOnly.set(state, { hideControls })` — тот же экземпляр переключает режим на месте, сохраняя курсор, историю отмен и прокрутку.
`onChange`	`(api: API, event: BlockMutationEvent \| BlockMutationEvent[]) => void`	`undefined`	Функция обратного вызова при изменении; аргумент event несёт произошедшую мутацию (или массив мутаций, если несколько срабатывают одновременно)
`onSave`	`(data: OutputData, api: API) => void`	`undefined`	Реактивный колбэк сохранения — срабатывает автоматически с полным сериализованным содержимым при каждом отложенном изменении, поэтому save() вручную вызывать не нужно.
`onReady`	`(blok?: Blok) => void`	`undefined`	Срабатывает один раз, когда редактор становится готов, получая полностью инициализированный экземпляр Blok
`onEnter`	`(event: KeyboardEvent, api: API) => boolean \| void`	`undefined`	Срабатывает при нажатии Enter в блоке, прежде чем Blok разделит его или создаст новый. Верните true, чтобы пометить событие обработанным — Blok отменит своё разделение/создание блока (нативный перенос строки всё равно предотвращается). Не срабатывает для Shift+Enter, инструментов с enableLineBreaks и пока Enter принадлежит поповеру или тулбару. Подходит для чат-полей («Enter отправляет») — сочетайте с настройкой preserveBlank параграфа вместо наследования от Paragraph.
`autofocus`	`boolean`	`false`	Если true, устанавливает курсор в первый блок, как только редактор готов
`inlineToolbar`	`string[] \| boolean`	`true`	Строчная панель по умолчанию для всех инструментов; массив ограничивает её перечисленными строчными инструментами, false отключает её. Живое поле: перенастраивается на лету через `tools.setInlineToolbar(config)`.
`hideToolbar`	`boolean`	`false`	Скрыть hover-тулбар блока (кнопку «плюс» / ручку перетаскивания) и убрать зарезервированный под него отступ редактора; меню по клавише "/" продолжает работать. Живое поле: переключается на лету через `toolbar.setHidden(hidden)`.
`i18n`	`I18nConfig`	`undefined`	Конфигурация интернационализации (локаль + словарь сообщений). Живое: меняйте язык на лету через `i18n.update({ locale, messages })` — редактор переименовывается на месте (`defaultLocale` остаётся только для монтирования).
`theme`	`'auto' \| 'light' \| 'dark'`	`'auto'`	Цветовая тема; 'auto' следует настройке ОС через prefers-color-scheme