将光标处的内容插入到内容可编辑的div中
我有一个可以理解的div，我需要在插入位置插入文本，
这可以很容易地在IE中通过document.selection.createRange().text = "banana"
有没有类似的方式在Firefox / Chrome中实现？
（我知道这里存在一个解决scheme，但是不能用在contenteditable div中，而且看起来很笨拙）
谢谢！
以下function将在插入位置插入文本并删除现有的select。 它适用于所有主stream桌面浏览器：
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
根据评论，这里有一些保存和恢复select的代码。 在显示上下文菜单之前，应该将saveSelection的返回值存储在一个variables中，然后将该variables传递给restoreSelection以在隐藏上下文菜单和插入文本之前恢复select。
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(); } } }
- 使用
window.getSelection()获取select对象。 - 使用
Selection.getRangeAt(0).insertNode()添加一个文本节点。 -
如有必要，使用
Selection.modify()将光标位置移动到添加的文本后面。 （不标准化，但在Firefox，Chrome和Safari中支持此function）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"); }; }
只是一个简单的方法与jQuery的：
复制div的全部内容
var oldhtml=$('#elementID').html();
var tobejoined='<span>hii</span>';
//element with new html would be
$('#elementID').html(oldhtml+tobejoined);
简单！
