XHTML DOM - Как разделить тег на IE? - PullRequest
Новая
       16

XHTML DOM - Как разделить тег на IE?

0 голосов
/ 28 января 2012

Предположим, у меня есть часть HTML-документа, содержащего следующий код (базовая структура): 

<p>
  <span class="1">This is my first content</span>
  <span class="2">This is my second content</span>
</p>

Я бы хотел, чтобы пользователь мог выделить часть текста и применить к нему новый класс. Допустим, пользователь выбирает «is first» в первом диапазоне и применяет класс «3». Я хотел бы получить следующий результат: 

<p>
  <span class="1">This </span>
  <span class="3">is my first</span>
  <span class="1"> content</span>
  <span class="2">This is my second content</span>
</p>

Мне удалось сделать это в Firefox с помощью execCommand «InsertHTML», но я не могу найти способ сделать это в IE (до IE9) Единственный результат, который у меня есть, это вложенный элемент span, как показано ниже: 

<p>
  <span class="1">This <span class="3">is my first</span> content</span>
  <span class="2">This is my second content</span>
</p>

Ты хоть представляешь, как мне этого добиться? Любая помощь приветствуется ! Кстати, если вам это кажется слишком простым, как бы вы справились со случаем, когда пользователь выберет часть текста, которая занимает более 2 или более интервалов? более 2 или более пс?

1 Ответ

0 голосов
/ 25 февраля 2012

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

Вот несколько «непроверенных» кодов, использующих jQuery и Rangy, которые, мы надеемся, укажут вам правильное направление для вашего первого случая: 

var splitTag=function(class){
    var sel = rangy.getSelection();

    // this is your selection, in your example "is my first"
    var r0 = sel.getRangeAt(0);

    // create a new range       
    var r1 = rangy.createRange();
    // this would be your <p>
    var p = r0.endContainer.parentNode;

    // set the new range to start at the end of your phrase and to end at <p>
    r1.setStart(r0.endContainer, r0.endOffset);
    r1.setEnd(p, p.length-1);

    // extract the content of your first selection "is my first"
    var r0Txt=r0.toHtml();

    // make it into an span, with class set to "class argument" which would be 3 
    var newContent=$("<span/>").html(r0Txt).attr("class", class);

    r0.deleteContents();

    // insert the new node before r1
    r1.insertNode(newContent[0]);
    sel.removeAllRanges();
}

это должно дать вам результат для вашей первой ситуации. для выбора по нескольким абзацам, вот модификация кода: 

var splitTag=function(class){
    var sel = rangy.getSelection();

    var r0 = sel.getRangeAt(0);

    var r1 = rangy.createRange();
    var p = r0.endContainer.parentNode;

    r1.setStart(r0.endContainer, r0.endOffset);
    r1.setEnd(p, p.length-1);

    var r0Txt=r0.toHtml();

    if(!r0.startContainer===r0.endContainer){
        // the selection spans multiple dom's

        // set the class of all spans in the highlight to 3
        var newContent=$(r0Txt).find("span").attr("class",class);
    }else{
        var newContent=$("<span/>").html(r0Txt).attr("class", class);
    }

    r0.deleteContents();
    r1.insertNode(newContent[0]);
    sel.removeAllRanges();
}
...