ФреймворкJavaScript

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

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

Обновлено 8 сент. 2026 г.Редактировать на 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

Найти родительский элемент текущего выделения, соответствующий тегу и, при необходимости, классу.

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

Стандартный способ для строчных инструментов проверить, находится ли курсор уже внутри их тега (например, <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

Расширить выделение на весь элемент.

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

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

TypeScript

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

selection.setFakeBackground()

void

Установить фейковый фон, имитирующий выделение, когда фокус уходит в сторону. Полезно для строчных инструментов.

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

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

TypeScript

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

selection.removeFakeBackground()

void

Убрать фейковый фон выделения.

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

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

TypeScript

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

selection.clearFakeBackground()

void

Очистить всё состояние фейкового фона: и DOM-элементы, и внутренние флаги.

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

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

TypeScript

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

selection.save()

void

Сохранить текущий диапазон выделения, чтобы восстановить его позже.

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

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

TypeScript

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

// Do something that moves focus away...

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

selection.restore()

void

Восстановить ранее сохранённый диапазон выделения.

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

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

TypeScript

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