Перейти к содержимому
Фреймворк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

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

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

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