Skip to content
ФреймворкJavaScript

Read-only API: включение и выключение правки

Управление режимом только для чтения редактора. Переключение происходит на месте: тот же экземпляр редактора меняет режим, сохраняя позицию курсора, историю отмен и прокрутку — поэтому переключатель «редактирование/просмотр» — это `readOnly.set(!isEditing)` на ОДНОМ экземпляре вместо уничтожения одного редактора и создания другого.

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

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

Методы ниже вызываются на редакторе, созданном через 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');

Методы

readOnly.set(state, options?)

Promise<boolean>

Устанавливает режим только для чтения в указанное булево состояние. Переключение происходит на месте — без destroy/recreate: экземпляры блоков, позиция курсора, история отмен и прокрутка сохраняются. Передайте `{ hideControls: true }`, чтобы дополнительно скрыть hover-тулбар, настройки блока и строчную панель, пока активен режим только для чтения — опция записывает объектную форму `config.readOnly`, так что живое состояние её отражает. Возвращает новое состояние.

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

Предпочтительный способ войти/выйти из режима только для чтения — переключает на месте, сохраняя курсор, историю отмен и прокрутку. Возвращает промис с новым состоянием после применения.

Параметры

ПараметрТипОбязательныйПо умолчаниюОписание
statebooleanОбязательный—Устанавливаемое состояние режима только для чтения.
options.hideControlsboolean—falseHide all editor controls (hover toolbar, block settings popover, inline toolbar) while read-only is active.
TypeScript
// The edit/view toggle: ONE instance, flipped in place —
// caret, undo history and scroll survive the switch
await editor.readOnly.set(!isEditing);

// Enable read-only and hide all controls
// (hover toolbar, block settings, inline toolbar)
await editor.readOnly.set(true, { hideControls: true });

// Check state
console.log(editor.readOnly.isEnabled); // true or false
console.log(editor.readOnly.togglesInPlace); // true

readOnly.toggle(state?)

Promise<boolean>Устарело

Toggle read-only state. Without parameter, toggles current state. With parameter, sets to specified state.

Используйте вместо: readOnly.set

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

Оставлен для совместимости; без параметра переключает текущее состояние.

TypeScript
// Toggle current state
const isReadOnly = await editor.readOnly.toggle();

// Enable read-only
await editor.readOnly.toggle(true);

// Disable read-only
await editor.readOnly.toggle(false);

Свойства

СвойствоТипОписание
isEnabledbooleanControl the read-only state of the editor. Toggling is in-place: the same editor instance flips modes, preserving caret position, undo history and scroll — so an edit/view toggle is `readOnly.set(!isEditing)` on ONE instance instead of destroying one editor and constructing another.
togglesInPlacetrueКонстанта наблюдаемости: всегда true — `readOnly.set()` переключает режим на месте, сохраняя экземпляры блоков, курсор, историю отмен и прокрутку, вместо пересоздания редактора. Проверяйте её, прежде чем полагаться на семантику переключения на месте.
TypeScript
// The edit/view toggle: one instance, one call.
// Caret, undo history and scroll survive the switch —
// no destroy-and-recreate.
async function setEditing(isEditing: boolean) {
  await editor.readOnly.set(!isEditing);
}

// Framework adapters do this for you: change the readOnly
// prop (React/Vue) or input (Angular) and the adapter calls
// readOnly.set on the existing instance — same editor identity.