Доступ к выбранному изображению в поле contenteditable в iframe

Question

У меня есть проблема, чтобы получить src или id или что-либо из выбранного изображения, которое находится внутри contenteditable div-контейнера внутри iframe. Ну, можно получить выделенную текстовую информацию с помощью getSelection()- вызовите так:

window.document.getElementById("monitor").contentWindow.document.getSelection();
// "monitor" = iframe id

Но если я выберу изображение вместо текста, я получу пустой результат. Я искал часы и часы, но не нашел никакого решения. Кто-нибудь знает способ, как решить эту проблему? (Я использую Firefox 4)

Answer 1

window.getSelection() (для которого document.getSelection() псевдоним в HTML5-совместимых браузерах) возвращает Selection объект, а не строка (это только внешне выглядит как строка, потому что его toString() метод возвращает выделенный текст). Наиболее полезным аспектом для этого является возможность получить один или несколько объектов DOM Range, представляющих выделение, используя getRangeAt(),

Когда у вас есть Range, получить все DOM-узлы, которые он содержит, немного сложно. Вы можете использовать мою библиотеку Rangy, которая добавляет getNodes() Метод его реализации Range:

var sel = rangy.getSelection();
if (sel.rangeCount) {
    var range = sel.getRangeAt(0);
    var elements = range.getNodes([1]);
    for (var i = 0; i < elements.length; ++i) {
        alert("Selected element: " + elements[i].tagName);
    }
}