在内容可编辑div中的光标处插入文本

Question

我有一个contenteditable div，需要在插入符号的位置插入文本，

这可以通过IE在IE中轻松完成  document.selection.createRange().text = "banana" 

在Firefox / Chrome中有类似的实现方式吗？

在内容可编辑div中的光标处插入文本

Answer 1

使用获取选择对象window.getSelection()。使用Selection.getRangeAt(0).insertNode()添加textnode。如有必要，使用将光标移动到添加的文本后面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");    };}

Answer 2

// <div contenteditable id="myeditable">// const editable = document.getElementById('myeditable')// editable.focus()// document.execCommand('insertHTML', false, '<b>B</b>anana')document.execCommand('insertText', false, 'banana')

Answer 3

只是一个简单的方法与jQuery：复制div的全部内容var oldhtml=$('#elementID').html();var tobejoined='<span>hii</span>';//element with new html would be$('#elementID').html(oldhtml+tobejoined);