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

Selection API: чтение и установка выделения

Работа с выделением текста внутри редактора.

Редактировать на 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');

Методы

selection.findParentTag(tagName, className?)

HTMLElement | null

Find the parent element of the current selection matching the tag and optionally class.

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

Стандартный способ для строчных инструментов проверить, находится ли курсор уже внутри их тега (например, <a> для ссылки).

TypeScript
const bold = editor.selection.findParentTag('B');
if (bold) {
  console.log('Selection is inside bold text');
}

const link = editor.selection.findParentTag('A', 'external-link');

selection.expandToTag(node)

void

Expand selection to cover the entire element.

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

Расширяет выделение на весь элемент — обычно чтобы выделить существующую разметку перед заменой или удалением.

TypeScript
const element = editor.selection.findParentTag('B');
if (element) {
  editor.selection.expandToTag(element);
  // Now entire bold element is selected
}

selection.setFakeBackground()

void

Set a fake background to imitate selection when focus moves away. Useful for inline tools.

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

Сохраняет видимую подсветку «выделения», пока фокус уходит в поле вашего инструмента. Всегда сопровождайте последующим removeFakeBackground().

TypeScript
// Save selection visual before opening a modal
editor.selection.setFakeBackground();
// Open modal - selection stays visually highlighted

selection.removeFakeBackground()

void

Remove the fake background selection.

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

Убирает фейковую подсветку из setFakeBackground(); вызывайте при закрытии вашего строчного UI.

TypeScript
// After closing modal
editor.selection.removeFakeBackground();

selection.clearFakeBackground()

void

Clear all fake background state - both DOM elements and internal flags.

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

Более полный сброс, чем removeFakeBackground() — очищает и DOM, и внутренние флаги, если состояние рассинхронизировалось.

TypeScript
// Full cleanup after undo/redo
editor.selection.clearFakeBackground();

selection.save()

void

Save the current selection range to restore later.

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

Сохраните текущий диапазон перед уходом фокуса из документа (например, при открытии диалога), затем верните через restore().

TypeScript
// Save selection before moving focus
editor.selection.save();

// Do something that moves focus away...

// Restore selection
editor.selection.restore();

selection.restore()

void

Restore a previously saved selection range.

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

Восстанавливает диапазон, сохранённый save() — цикл, позволяющий строчным инструментам пережить смену фокуса.

TypeScript
editor.selection.save();
// ... operations that move focus ...
editor.selection.restore();