在内容可编辑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);