ФреймворкJavaScript

Toolbar API: управление блочным тулбаром

Управление панелью инструментов блока и её состоянием.

Как получить экземпляр редактора

Методы ниже вызываются на редакторе, созданном через new Blok(). Они доступны после того, как разрешится editor.isReady.

TypeScript

// You already hold the instance returned by the constructor.
const editor = new Blok({ holder: 'editor' });
await editor.isReady;

// Call any API method on it.
editor.caret.setToLastBlock('end');

Методы

toolbar.close(options?)

void

Закрыть панель инструментов с необязательной конфигурацией.

Когда использовать

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

TypeScript

// Standard close. The next mousemove re-opens the toolbar: close() clears the
// hovered block and resets the hover dedup, so BlockHovered fires again.
editor.toolbar.close();

// Close and keep it closed while the pointer stays on the same block
// (skips the hover-state reset, so no BlockHovered is re-emitted for it).
editor.toolbar.close({ setExplicitlyClosed: false });

toolbar.open()

void

Открыть панель инструментов.

Когда использовать

Принудительно открывает панель инструментов для текущего блока; обычно она появляется при наведении/фокусе, поэтому используйте умеренно.

TypeScript

editor.toolbar.open();

toolbar.toggleBlockSettings(openingState?, trigger?, options?)

void

Переключить меню настроек блока (☰).

Когда использовать

Открывает/закрывает меню настроек ☰ из кода; передайте явный булев флаг, чтобы задать состояние, а не переключать.

Параметры

Параметр	Тип	Обязательный	По умолчанию	Описание
`openingState`	`boolean`	—	`toggle current state`	Принудительно открыть (true) или закрыть (false) меню настроек.
`trigger`	`HTMLElement`	—	`undefined`	Элемент, к которому привязывается поповер настроек.
`options`	`ToolbarBlockSettingsOptions`	—	`undefined`	Переопределения размещения. `placeLeftOfAnchor` уже равен `true`, когда вы передаёте элемент-триггер, — задайте `false`, чтобы вместо этого открыть поповер справа от триггера.

TypeScript

// Toggle current state
editor.toolbar.toggleBlockSettings();

// Force open
editor.toolbar.toggleBlockSettings(true);

// Force close
editor.toolbar.toggleBlockSettings(false);

// Anchor the settings popover to a custom trigger element.
// Left placement is already the default for an element trigger —
// opt out to open the popover to the right instead:
editor.toolbar.toggleBlockSettings(true, triggerEl, { placeLeftOfAnchor: false });

toolbar.toggleToolbox(openingState?)

void

Переключить тулбокс (меню +).

Когда использовать

Открывает/закрывает тулбокс программно; передайте булев флаг, чтобы задать состояние.

TypeScript

// Toggle current state
editor.toolbar.toggleToolbox();

// Force open
editor.toolbar.toggleToolbox(true);

toolbar.setHidden(hidden)

void

Runtime-сеттер для `config.hideToolbar`: скрывает или показывает hover-панель инструментов (кнопку «плюс» / ручку перетаскивания) И убирает или возвращает зарезервированный под неё отступ редактора — атрибут `data-blok-toolbar-hidden` на обёртке синхронизируется, так что пустого места не остаётся. Меню по клавише "/" продолжает работать, пока панель инструментов скрыта.

Когда использовать

Runtime-половина опции конфигурации hideToolbar — переключает и поведение панели инструментов, и зарезервированный отступ, так что пустого места не остаётся.

Параметры

Параметр	Тип	Обязательный	По умолчанию	Описание
`hidden`	`boolean`	Обязательный	—	true — скрыть hover-панель инструментов и убрать отступ; false — вернуть и то и другое.

TypeScript

// Hide the hover toolbar and collapse its gutter
editor.toolbar.setHidden(true);

// Restore it
editor.toolbar.setHidden(false);

toolbar.setPosition(position)

void

Runtime-сеттер для `config.toolbarPosition`: переносит плавающие элементы управления блоком между inline-start и inline-end отступами редактора. Атрибут `data-blok-toolbar-position` на обёртке синхронизируется — он управляет и переносом отступа, и стороной, к которой прижаты элементы управления, — а меню настроек блока зеркалится вместе с ними, поэтому оно никогда не открывается поверх своего блока. Открытая панель инструментов не закрывается, а перестраивается на месте.

Когда использовать

Runtime-половина опции конфигурации toolbarPosition — переносит элементы управления вместе с зарезервированным отступом и зеркалит меню настроек блока.

Параметры

Параметр	Тип	Обязательный	По умолчанию	Описание
`position`	`'left' \| 'right'`	Обязательный	—	'left' — inline-start отступ (по умолчанию), 'right' — inline-end.

TypeScript

// Move the +/⠿ controls to the right of the content column
editor.toolbar.setPosition('right');

// Back to the left gutter
editor.toolbar.setPosition('left');