Skip to content
Фреймворк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

Close the toolbar with optional configuration.

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

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

TypeScript
// Standard close (prevents hover reopen — default)
editor.toolbar.close();

// Close but allow the toolbar to reopen on hover
editor.toolbar.close({ setExplicitlyClosed: false });

toolbar.open()

void

Open the toolbar.

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

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

TypeScript
editor.toolbar.open();

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

void

Toggle the block settings menu (☰).

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

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

Параметры

ПараметрТипОбязательныйПо умолчаниюОписание
openingStatebooleantoggle current stateForce the settings menu open (true) or closed (false).
triggerHTMLElementundefinedElement to anchor the settings popover to.
optionsToolbarBlockSettingsOptionsundefinedPlacement overrides — placeLeftOfAnchor positions the popover to the left of the anchor.
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,
// placed to the left of the anchor
editor.toolbar.toggleBlockSettings(true, triggerEl, { placeLeftOfAnchor: true });

toolbar.toggleToolbox(openingState?)

void

Toggle the toolbox (+ menu).

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

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

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 — переключает и поведение тулбара, и зарезервированный отступ, так что пустого места не остаётся.

Параметры

ПараметрТипОбязательныйПо умолчаниюОписание
hiddenbooleanОбязательныйtrue — скрыть hover-тулбар и убрать отступ; false — вернуть и то и другое.
TypeScript
// Hide the hover toolbar and collapse its gutter
editor.toolbar.setHidden(true);

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