Вставить текст под курсором в контенте редактируемых ДИВ

Question

У меня есть contenteditable DIV, где нужно вставить текст в позиции курсора,

Это можно легко сделать в IE с помощью document.selection.createRange().text = "banana"

Есть ли подобный способ внедрения этого в Firefox/Chrome?

(я знаю, решение существует here, но он не может быть использован в contenteditable DIV, и выглядит неуклюжим)

Спасибо!

Answer 1

Следующая функция вставляет текст в положение каретки и удаляет существующий выбор. Она работает во всех основных настольных браузерах:

function insertTextAtCursor(text) { 
    var sel, range, html; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.deleteContents(); 
      range.insertNode(document.createTextNode(text)); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     document.selection.createRange().text = text; 
    } 
} 

UPDATE

На основе комментариев, вот некоторый код для сохранения и восстановления выбора. Перед отображением вашего контекстного меню вы должны сохранить возвращаемое значение saveSelection в переменной, а затем передать эту переменную в restoreSelection, чтобы восстановить выбор после скрытия контекстного меню и перед вставкой текста.

function saveSelection() { 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      return sel.getRangeAt(0); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     return document.selection.createRange(); 
    } 
    return null; 
} 

function restoreSelection(range) { 
    if (range) { 
     if (window.getSelection) { 
      sel = window.getSelection(); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } else if (document.selection && range.select) { 
      range.select(); 
     } 
    } 
} 

Answer 2

только простой метод с JQuery:

Скопируйте все содержимое DIV

var oldhtml=$('#elementID').html();

var tobejoined='<span>hii</span>';

//element with new html would be

$('#elementID').html(oldhtml+tobejoined);

простой!

Answer 3

1. Получить объект с window.getSelection().
2. Используйте Selection.getRangeAt(0).insertNode(), чтобы добавить текстовое поле.

3. При необходимости переместите позицию курсора за добавленный текст с помощью Selection.modify(). (Не нормируется, но эта функция поддерживается в Firefox, Chrome и Safari)

   function insertTextAtCursor(text) 
   { 
       let selection = window.getSelection(); 
       let range = selection.getRangeAt(0); 
       range.deleteContents(); 
       let node = document.createTextNode(text); 
       range.insertNode(node); 
   
       for(let position = 0; position != text.length; position++) 
       { 
        selection.modify("move", "right", "character"); 
       }; 
   }