Используйте javascript для расширения диапазона DOM для покрытия частично выбранных узлов

Я работаю над текстовым редактором, таким как веб-приложение, в основном редактор XML, написанный на javascript.

Мой код javascript должен обернуть выбор узлов из контейнера contentEditable div. Я использую методы, описанные в MDC. Но так как мне нужно синхронизировать содержимое контейнеров div с моим XML DOM, я хотел бы избежать частичных выборов, как описано в диапазонах w3c:

<BODY><H1>Title</H1><P>Blah xyz.</P></BODY

............^----------------^............

Этот выбор начинается внутри H1 и заканчивается внутри P, я бы хотел, чтобы он полностью включал H1, P.

Есть ли простой способ расширить выбор, чтобы полностью покрыть частично отобранных детей? В основном я хочу использовать range.surroundContents(), не запуская исключения.

(Код не должен работать с операцией/IE)

Ответ 1

Глядя на документацию MDC, я могу сделать что-то вроде этого:

Selection.prototype.coverAll = function() {
    var ranges = [];
    for(var i=0; i<this.rangeCount; i++) {
        var range = this.getRangeAt(i);
        while(range.startContainer.nodeType == 3
              || range.startContainer.childNodes.length == 1)
            range.setStartBefore(range.startContainer);
        while(range.endContainer.nodeType == 3
              || range.endContainer.childNodes.length == 1)
            range.setEndAfter(range.endContainer);
        ranges.push(range);
    }
    this.removeAllRanges();
    for(var i=0; i<ranges.length; i++) {
        this.addRange(ranges[i]);
    }
    return;
};

Вы можете попробовать его здесь: http://jsfiddle.net/GFuX6/9/

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

Чтобы сделать несколько частичных узлов Bold, вот решение:

Selection.prototype.boldinize = function() {
    this.coverAll();
    for(var i=0; i<this.rangeCount; i++) {
        var range = this.getRangeAt(i);
        var parent = range.commonAncestorContainer;
        var b = document.createElement('b');
        if(parent.nodeType == 3) {
            range.surroundContents(b);
        } else {
            var content = range.extractContents();
            b.appendChild(content);
            range.insertNode(b);
        }
    }
};

Ответ 2

Если вы хотите включить теги H1 и P (т.е. действительную разметку), не беспокойтесь. Вы получите это бесплатно. Если вы хотите, чтобы вы включили весь контент в (частичный) выбор, вам нужно получить доступ к объекту Selection. Читайте об этом на Введение в Quirksmode в Range.

Ответ 3

Благодаря Alsciende я наконец придумал код http://jsfiddle.net/wesUV/21/. Этот метод не такой жадный, как другой. После coverAll() всегда должно работать функция surroundContents().

Selection.prototype.coverAll = function() {
  var ranges = [];   
  for(var i=0; i<this.rangeCount; i++) {
    var range = this.getRangeAt(i);
    var ancestor = range.commonAncestorContainer;
    if (ancestor.nodeType == 1) {            
        if (range.startContainer.parentNode != ancestor && this.containsNode(range.startContainer.parentNode, true)) {
            range.setStartBefore(range.startContainer.parentNode);
        }
        if (range.endContainer.parentNode != ancestor && this.containsNode(range.endContainer.parentNode, true)) {
                range.setEndAfter(range.endContainer.parentNode);
        }
    }
    ranges.push(range);
  }
  this.removeAllRanges();
  for(var i=0; i<ranges.length; i++) {
    this.addRange(ranges[i]);
  }
  return;
};

И функция boldinize:

Selection.prototype.boldinize = function() {
  for(var i=0; i<this.rangeCount; i++) {        
    var range = this.getRangeAt(i);
    var b = document.createElement('b');
    try {
        range.surroundContents(b);
    } catch (e) {
        alert(e);
    }
  }
};