граничные точки диапазона не отвечают определенным требованиям

Question

Я пишу сценарий, на котором пользователь должен иметь возможность выбрать какой-либо текст, который отправляется через ajax в скрипт backend для дальнейшего процесса.

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

Для

например

<p>This is <strong>some</strong> cool <em>italic</em> text, <u>really!</u></p> 

Итак, что работает, что это круто.

Тем не менее, вопрос, если текстовый узел начинается с hsome жирным шрифтом, курсивом или подчеркнутым текстом или даже заголовков он выводит следующее сообщение об ошибке на FireFox консоли:

The boundary-points of a range does not meet specific requirements." code: "1 range.surroundContents($('<span...wAnno_'+newLen+'"></span>').get(0)); 

ошибка выводится, когда пользователь выбирает что-то вроде:

<strong>Mark says</strong> Hi 

ИЛИ

<em>Mark says</em> Hi 

ИЛИ

<u>Mark says</u> Hi 

Та же ошибка выводит даже если текст заключен в теги заголовков например <h2>test</h2>

Мой код выглядит следующим образом:

var select = window.getSelection(); 
var parents = $(select.focusNode).parents('.the-content'); 

if($(select.focusNode).parent().hasClass('.highlighted')) { 
    alert('This text is already highlighted'); 
} else { 
    for(var i = 0; i < select.rangeCount; i++) { 
     var range = select.getRangeAt(i); 
     range.surroundContents($('<span class="newHighlight" id="newHigh_'+newLen+'"></span>').get(0)); 
    } 
} 

var selectedText = select.toString(); 

мне нужна помощь с фиксацией этого.

Помощь с кодом будет потрясающей.

Answer 1

Проблема заключается в том, что метод surroundContentsRange не может работать в диапазоне, где начальная и конечная границы лежат внутри разных элементов, поскольку окружающее содержимое такого диапазона внутри элемента не приведет к допустимому HTML. При изменении цвета фона вашего диапазона все, что вам нужно сделать, вы можете использовать следующий трюк с document.execCommand:

function highlight(colour) { 
    var range, sel; 
    if (window.getSelection) { 
     // Non-IE case 
     sel = window.getSelection(); 
     if (sel.getRangeAt) { 
      range = sel.getRangeAt(0); 
     } 
     document.designMode = "on"; 
     if (range) { 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } 
     // Use HiliteColor since some browsers apply BackColor to the whole block 
     if (!document.execCommand("HiliteColor", false, colour)) { 
      document.execCommand("BackColor", false, colour); 
     } 
     document.designMode = "off"; 
    } else if (document.selection && document.selection.createRange) { 
     // IE case 
     range = document.selection.createRange(); 
     range.execCommand("BackColor", false, colour); 
    } 
} 

В противном случае, вам придется пройти через текстовые узлы в пределах диапазона и окружают каждый с a <span>, что не является тривиальным. Я работаю над библиотекой кросс-браузера и библиотекой выбора, которая включает модуль для применения класса CSS к содержимому выделения или диапазона по адресу http://code.google.com/p/rangy/, хотя этот модуль находится в нескольких днях от того, чтобы быть зарегистрированным и выпущенным.