在contentEditable元素中插入一个HTML元素

I have a contentEditable div where I want to insert HTML tags (a simple span element).

我有一个contentEditable div，我希望在其中插入HTML标记(一个简单的span元素)。

Is there a cross browser solution that allows me to insert those tags over my div selection or cursor position. If something else is selected on the page (not in the div), I want to append the tag to the end of the div.

是否有跨浏览器解决方案允许我将这些标签插入到我的div或光标位置。如果页面上(不在div中)选择了其他内容，我希望将标记附加到div的末尾。

Thanks

谢谢

2 个解决方案

#1

Here is a kickstart

这是一个启动

// get the selection range (or cursor     position)
var range = window.getSelection().getRangeAt(0); 
// create a span
var newElement = document.createElement('span');
newElement.id = 'myId';
newElement.innerHTML = 'Hello World!';

// if the range is in #myDiv ;)
if(range.startContainer.parentNode.id==='myDiv') {
   // delete whatever is on the range
   range.deleteContents();
   // place your span
   range.insertNode(newElement);
}

I don't have IE but works fine on firefox, chrome and safari. Maybe you want to play with range.startContainer to proceed only if the selection is made on the contentEditable div.

我没有IE，但在firefox、chrome和safari上运行良好。也许你想玩距离游戏。startContainer仅在contentEditable div上进行选择时才继续。

EDIT: According to quirksmode range intro you have to change the window.getSelection() part to be IE compatible.

编辑:根据quirksmode范围介绍，您必须更改windows . getselection()部分才能与IE兼容。

var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
else if (document.selection) { // should come last; Opera!
    userSelection = document.selection.createRange();
}

#2

The following will do this in all major browsers (including IE 6). It will also handle cases where the end of the selection is outside your <div> and cases where the selection is contained within a child (or more deeply nested) element inside the <div>.

下面将在所有主要浏览器(包括IE 6)中执行此操作，它还将处理选择结束在

之外的情况，以及

中包含子元素(或更深层嵌套)的情况。

Live example: http://www.jsfiddle.net/timdown/XGSyn/

生活例子:http://www.jsfiddle.net/timdown/XGSyn/

Code:

代码:

function isOrContainsNode(ancestor, descendant) {
    var node = descendant;
    while (node) {
        if (node === ancestor) return true;
        node = node.parentNode;
    }
    return false;
}

function insertNodeOverSelection(node, containerNode) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            if (isOrContainsNode(containerNode, range.commonAncestorContainer)) {
                range.deleteContents();
                range.insertNode(node);
            } else {
                containerNode.appendChild(node);
            }
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        if (isOrContainsNode(containerNode, range.parentElement())) {
            html = (node.nodeType == 3) ? node.data : node.outerHTML;
            range.pasteHTML(html);
        } else {
            containerNode.appendChild(node);
        }
    }
}

#1