可编辑Div Caret位置 [英] Editable Div Caret Position

问题描述

我有一个可编辑的div，我正在使用一个按钮将图像插入div。现在，我只是在做document.getElementById（'elementid'）。innerHTML。 + =;以便将图像添加到div的末尾。我想输入插入的地方。我会如何去做这件事？

谢谢

在插入符处插入一个元素并不难。在所有主流浏览器中，以下函数在插入符处（或在选择结束时插入节点）插入节点：

  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）; 
} 
} 
  

I have an editable div and I am using a button to insert an image into the div. Right now, I am just doing document.getElementById('elementid').innerHTML. += ; in order to get the image added to the end of the div. I would like to enter the image where the caret is. How would I go about doing this?

Thanks

解决方案

To insert an element at the caret is not too hard. The following function inserts a node at the caret (or at the end of the selection, if content is selected) in all major browsers:

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);
    }
}

这篇关于可编辑Div Caret位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！