Editable Div Caret Position

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

ли эта помощь: http://jsfiddle.net/8akDr/

Answer 3

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

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