Как узнать, какой элемент изменяется в случае contentEditable?

Question 1

У меня небольшая проблема/вопрос. Я работаю над небольшим редактором WYSIWYG. Я использую div с параметром contentEditable="true" и хотел бы знать, когда нажимается кнопка, какой элемент в моем div изменяется пользователем.

Например, если в div есть 3 абзаца, и этот пользователь изменяет второй, я хотел бы знать, когда он нажимает кнопку, которую он в настоящее время изменяет во втором абзаце, чтобы отобразить текстовое содержимое! В этом примере "P2":

<div contenteditable="true"><p>P1</p><p>P2</p><p>P3</p></div>

Заранее спасибо за помощь.

Николас

contenteditable

0

sanceray3 26 Мар 2011 в 14:47

Answer

Вы можете проверить выбор в событии mousedown кнопки. Следующее будет работать во всех основных браузерах:

function getSelectionBoundaryContainerElement(start) {
    var container = null;
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0);
            range.collapse(start);
            container = range.startContainer;
            if (container.nodeType != 1) {
                container = container.parentNode;
            }
        }
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        textRange.collapse(start);
        container = textRange.parentElement();
    }
    return container;
}

document.getElementById("yourButtonId").onmousedown = function() {
    alert(getSelectionBoundaryContainerElement().innerHTML);
}

0

Tim Down 27 Мар 2011 в 05:58

Question 2

Вы можете проверить выбор в событии mousedown кнопки. Следующее будет работать во всех основных браузерах:

function getSelectionBoundaryContainerElement(start) {
    var container = null;
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var range = sel.getRangeAt(0);
            range.collapse(start);
            container = range.startContainer;
            if (container.nodeType != 1) {
                container = container.parentNode;
            }
        }
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        textRange.collapse(start);
        container = textRange.parentElement();
    }
    return container;
}

document.getElementById("yourButtonId").onmousedown = function() {
    alert(getSelectionBoundaryContainerElement().innerHTML);
}

0

Tim Down 27 Мар 2011 в 05:58

Как узнать, какой элемент изменяется в случае contentEditable?

1 ответ

Похожие вопросы

Связанные вопросы

Новые вопросы

contenteditable