Редактируемая позиция Div.

Question

У меня есть редактируемый div, и я использую кнопку для вставки изображения в div.Прямо сейчас я просто делаю document.getElementById ('elementid'). InnerHTML.+ =;чтобы изображение было добавлено в конец div.Я хотел бы ввести изображение, где находится каретка.Как мне поступить так?

Спасибо

Answer 1

Вставить элемент в каретку не так уж сложно.Следующая функция вставляет узел в каретку (или в конец выделения, если выбрано содержимое) во всех основных браузерах:

function insertNodeAfterSelection(node) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.collapse(false);
            range.insertNode(node);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.collapse(false);
        html = (node.nodeType == 3) ? node.data : node.outerHTML;
        range.pasteHTML(html);
    }
}

Answer 2

Ненавижу звучать негативно, но это так тяжело, это смешно.Вы должны иметь дело с IE и другими, и реализации сильно отличаются.Но когда становится сложнее, если вы нажимаете кнопку для вставки изображения, вы теряете фокус и позицию каретки, поэтому вам нужно помнить позицию с некоторой способностью добавлять закладки в закладки (опять же, IE отличается).Фокусировка не так важна, если ваш редактируемый контент находится в iframe и сохраняет свой фокус.(Примечание: не упуская IE здесь, я фактически предпочитаю их реализацию стандарту W3C drek.)

Вы можете посмотреть на некоторые текстовые редакторы с открытым исходным кодом для подсказок и подсказок.Но вы найдете огромное количество кода для решения этих простых задач.

Answer 3

Помогает ли это: http://jsfiddle.net/8akDr/