Javascript 在用户单击的位置插入图像

我有一个contenteditable div，我正在尝试将其设置为这样，当用户单击按钮时，它会在用户单击的div中插入一个图像（让我们用这个问题）。我试过几件事，但似乎都不管用。以下是我所拥有的：

HTML:

$（'.field'）。追加($(

将
html
更改为
append
，以便将图像插入任何已存在的内容之后

此外，使用上述方法创建dom元素对开发人员来说更干净、更具可读性，尽管这仅仅是一个具有一个属性的图像，因此如何操作并不重要。
只需将
img
标记附加到div的html中即可

$('.field').append('<img id="theImg" src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png" />');

$（'.field'）。追加（''）；

.
查找元素，并附加原始html：

$(document).ready(function() {
    $(".insert-image").on('click', function(event) {
        event.preventDefault();
        var $img = $('.field img.custom');
        if(!$img.length){
            $img = $('<img class="custom" src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">')
             $('.field').append($img);
        }

    });
});

$（文档）.ready（函数（）{
$（“.insert image”）。在（'click'，函数（事件）{
event.preventDefault（）；
变量$img=$（'.field img.custom'）；
如果（！$img.长度）{
$img=$（''）
$（'.field'）。追加（$img）；
}
});
});
您可以使用以下代码获取“编辑器”的当前状态和插入符号位置，然后插入图像

学分：

代码：

演示：
如果您只想将图像插入div，则只需$（'field'）.html（“”）；它必须位于用户单击的位置。如果用户在div中键入
Hello world
，然后插入图像，则应将图像添加到（
Hello world
）。如果用户键入
Hello world
并在
Hello
和
world
之间单击，则应在单词之间插入图像（
Hello world
）。好的，现在我知道您有什么问题了；）别忘了为未来的观众标记一个答案！答案必须在用户点击的地方。如果用户在div中键入
Hello world
，然后插入图像，则应在（
Hello world
）之后添加图像。如果用户键入
Hello world
并在
Hello
和
world
之间单击，则应在单词之间插入图像（
Hello world
）。我重新编辑了我的评论以使其更清晰。如果用户键入
Hello world
，在
Hello
和
world
之间单击，然后插入一个图像，则Append将不起作用。使用Append，它将执行以下操作：
Hello world
，在这种情况下，我需要的是
Hello world
，因为用户单击了在单词之间。它必须是用户单击的位置。如果用户在div中键入
Hello world
，然后插入图像，则应在（
Hello world
）之后添加图像。如果用户键入
Hello world
并在
Hello
和
world
之间单击，则应在单词之间插入图像（
Hello world
）。对我的评论进行编辑，以使其更清楚，因为append也不满足我的需要。有一个在光标处添加文本的示例。请参阅Irvin的答案！
$('.field').append('<img id="theImg" src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png" />');

$(document).ready(function() {
    $(".insert-image").on('click', function(event) {
        event.preventDefault();
        var $img = $('.field img.custom');
        if(!$img.length){
            $img = $('<img class="custom" src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">')
             $('.field').append($img);
        }

    });
});

$(document).ready(function () {
    $(".insert-image").on('click', function (event) {
        event.preventDefault();

        var x = document.createElement('img');
        x.src = "http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png";
        insertNodeOverSelection(x, document.getElementById('field'));
    });

    function insertNodeOverSelection(node, containerNode) {
        var sel, range, html, str;


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

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

});