CODEWITHSUNDEEP
javascriptjquery
Bagwell
Bagwell

Reputation: 2226

Inserting an image where the user clicked

I have a contenteditable div and I'm trying to make it so that when a user clicks a button, it inserts an image (let's use this image for this question) in the div where the user had clicked. I've tried a few things but none seemed to have worked. Here's what I have:

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

Upvotes: 2

Views: 322

Answers (4)

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can use the following code to get the current state of the "editor" and the caret position, than insert an image.

Credits: Insert image in "contenteditable" div using popup

Code:

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

});

Demo: http://jsfiddle.net/IrvinDominin/NBfCa/

Upvotes: 1

Nix
Nix

Reputation: 58522

Example Fiddle Find the element, and append the raw 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);
        }

    });
});

Upvotes: 0

Goose
Goose

Reputation: 3279

Just append img tag to the html of the div.

$('.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.

Upvotes: 0

tenub
tenub

Reputation: 3446

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

changed html to append so that the image is inserted after any content already there.

also, it is cleaner and more readable to developers to use the above method for creating dom elements, although since this is merely an image with one attribute it doesn't really matter how you do things.

Upvotes: 0

Related Questions