window.getSelection () дает мне выделенный текст, но я хочу HTML

Question

Я расширяю WYSIWYG HTML-редактор (для Firefox), я хочу добавить теги вокруг выделения. Я не могу найти функцию для этого в спецификации Mozilla Midas .

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

window.getSelection() почти работает, но дает мне nsISelection, который преобразуется в текстовую строку.

PS: document.getSelection() возвращает текстовую строку, даже не nsISelection.

Answer 1

Взгляните на спецификацию DOM Range . Вы можете получить Range из пользовательского выбора в Firefox, используя:

var range = window.getSelection().getRangeAt(0);

Обратите внимание, что некоторые браузеры, включая Firefox, допускают множественный выбор, доступ к которому можно получить с помощью метода выбора getRangeAt().

Range выражается через DOM-узлы и смещения в этих узлах. После того, как вы получили Range, сделать то, что вы хотите, не так просто, поскольку границы диапазона могут находиться в разных узлах на разных уровнях дерева DOM, поэтому простое окружение содержимого Range тегом не всегда возможно , Возможно, вы сможете сделать что-то вроде следующего, хотя это создаст новый элемент блока, который будет содержать выбранный контент:

var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
var div = document.createElement("div");
div.style.color = "yellow";
div.appendChild(selectionContents);
range.insertNode(div);

Другая, хакерская, альтернатива - это использование execCommand() метода document, чтобы изменить выделение (например, установив для него определенный цвет), а затем с помощью document.querySelectorAll или некоторой библиотеки селектора, чтобы выбрать элементы с этим цветом а затем примените к ним стиль.

Answer 2

Ответ Тима Дауна на правильном пути. Однако одна проблема заключается в том, что extractContents () удалит выделение из dom. Вы можете использовать

window.getSelection().getRangeAt(0).cloneContents(); 

, чтобы просто получить копию того, что выбрано. Затем вы можете обернуть это новым тегом, а затем заменить выбор. Забота Тима Дауна о диапазоне, охватывающем несколько элементов HTML, безусловно, является обоснованной. Я думаю, что как только вы получите диапазон, он «исправит» html, но когда вы вставите его обратно, это может вызвать проблемы. Здесь хороший ресурс для объекта Range.

Answer 3

window.getSelection () вернет объект. Вы можете использовать возвращенный объект выбора в виде строки, вызвав метод objects .toString ().

var selObj = window.getSelection();
var selectedText = selObj.toString(); 

https://developer.mozilla.org/en/DOM/window.getSelection