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

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

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

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

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

Ответ 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 или некоторую селекторную библиотеку, чтобы выбрать элементы с этим цветом а затем применить к ним стиль.

Ответ 2

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

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

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

Ответ 3

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

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

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