Insert an image into a tinymce editor

Updated 2017 to support TinyMCE Version 4.6.6 Note: ed.onChange.add(function(..)) doesn't work in the new version and it has to be substituted with ed.on('MouseUp',function(...)) Also the TinyMCE "tinyMCE.execCommand('mceInsertContent',..." can be substituted with "tinymce.activeEditor.insertContent(..." in the new version of TinyMCE SO question: https://stackoverflow.com/questions/21854798/insert-an-image-into-a-tinymce-editor

by user2314737

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.6/tinymce.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.6/tinymce.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.6/skins/lightgray/skin.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.6/skins/lightgray/content.min.css">
<textarea rows="10" cols="30" id="second"></textarea>
<p>
    <table id="imgTable">
        <tr>
            <td>
                <img src="http://static2.wikia.nocookie.net/__cb20090624134711/runescape/images/8/85/Smiley.svg" alt="Smiley face" height="42" width="42">
            </td>
            <td>
                <img src="http://upload.wikimedia.org/wikipedia/commons/a/a1/Glens_uber_magic_apple.gif" alt="Smiley face" height="42" width="42">
            </td>
        </tr>
    </table>

JavaScript

console.log(tinyMCE.init({
    // General options 
    mode: "exact",
    elements: "second",

    // Skin options
    skin: "o2k7",
    skin_variant: "silver",

    setup: function (ed) {
        // on mouse uo get selected text
        ed.on('MouseUp',function (ed, e) {
            var highlighted = tinyMCE.activeEditor.selection.getContent();
            if (highlighted) alert(highlighted);
        });
    }
}));


$(function () {
    $("#imgTable tr td").click(function (event) {
    console.log(tinymce)
    console.log(tinyMCE)

        var sr = $('img', this).attr('src');
      //  tinyMCE.execCommand('mceInsertContent', false, '<img alt="Smiley face" height="42" width="42" src="' + sr + '"/>');
      tinymce.activeEditor.insertContent('<img alt="Smiley face" height="42" width="42" src="' + sr + '"/>');
    });
});