Question

我有一个令人满意的div，我试图让它成为当用户点击一个按钮时，它会在用户的div中插入一个图像（让我们使用this image来解决这个问题）点击了。我尝试过一些东西，但似乎没有任何效果。这就是我所拥有的：

HTML：

<div class="field" contenteditable="true"></div>
<button class="insert-image">Insert Image</button>

JQuery的：

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

        // not sure what to do here
    });
});

Answer 1

您可以使用以下代码获取“编辑器”和插入符号位置的当前状态，而不是插入图像。

致谢：Insert image in "contenteditable" div using popup

代码：

$(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;
    }

});

演示：http://jsfiddle.net/IrvinDominin/NBfCa/

Answer 2

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

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

此外，开发人员使用上述方法创建dom元素更干净，更易读，尽管因为这只是一个具有一个属性的图像，所以你的工作方式并不重要。

Answer 3

只需将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" />');

Here is a fiddle

Answer 4

Example Fiddle找到元素，并附加原始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);
        }

    });
});

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

4 个答案: