Как узнать, включен ли элемент HTMLE в выделенный текст

Question

Можно ли выяснить, полностью ли включен HTMLElement в выбор?У меня есть сценарий, когда пользователь выбирает некоторый текст в редакторе HTML и применяет некоторый пользовательский стиль из списка.Теперь мне нужно изменить атрибут класса каждого элемента span, который заключен в этом выделении и окружает выделение новым промежутком с выбранным стилем.Я могу выяснить, находится ли конкретный элемент span в выделении, используя метод CompareBoundaryPoints в DOM Range в Firefox и Safari, но он не будет работать для IE.

Есть ли способ узнать, полностью ли заключен элементс в выбранном диапазоне для IE?

Спасибо

Kapil

Answer 1

Как говорит @standardModel, Rangy предоставляет вам полную поддержку * DOM Range в IE и имеет полезный метод getNodes(), который вы можете использовать:

var sel = rangy.getSelection();
if (sel.rangeCount) {
    var range = sel.getRangeAt(0);
    var spans = range.getNodes([1], function(node) {
        return node.nodeName.toLowerCase() == "span" && range.containsNode(node);
    });

    // Do stuff with spans here
}

Если бы вывместо того, чтобы использовать что-то столь же громоздкое, как Rangy, следующая функция сообщит вам, полностью ли выбран элемент:

function isSelected(el) {
    if (window.getSelection) {
        var sel = window.getSelection();
        var elRange = document.createRange();
        elRange.selectNodeContents(el);
        for (var i = 0, range; i < sel.rangeCount; ++i) {
            range = sel.getRangeAt(i);
            if (range.compareBoundaryPoints(range.START_TO_START, elRange) <= 0
                    && range.compareBoundaryPoints(range.END_TO_END, elRange) >= 0) {
                return true;
            }
        }
    } else if (document.selection && document.selection.type == "Text") {
        var textRange = document.selection.createRange();
        var elTextRange = textRange.duplicate();
        elTextRange.moveToElementText(el);
        return textRange.inRange(elTextRange);
    }
    return false;
}

Пример jsFiddle: http://jsfiddle.net/54eGr/1/

(*) Помимо обработки Rangeобновления под мутацией DOM

Answer 2

Возможно, вы захотите взглянуть на Rangy . Это значительно облегчает выбор и выбор диапазонов в xbrowser.