TinyMCE 4 w/ Twitter Bootstrap

Pepperweb tests

HTML

<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<textarea name="content"></textarea>
<title>Local image loading in to tinymce</title>
<br/>
<b>Image size should be lessthan 500kb</b>

JavaScript

tinymce.init({
    selector: "textarea",
    toolbar: "mybutton",
    height:400,
    setup: function(editor) {
        editor.addButton('mybutton', {
            text:"IMAGE",
            icon: false,
            onclick: function(e) {
                console.log($(e.target));
                if($(e.target).prop("tagName") == 'BUTTON'){
console.log($(e.target).parent().parent().find('input').attr('id'));                    if($(e.target).parent().parent().find('input').attr('id') != 'tinymce-uploader') {
                $(e.target).parent().parent().append('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
                    }
                $('#tinymce-uploader').trigger('click');
                $('#tinymce-uploader').change(function(){
                 var input, file, fr, img;

            if (typeof window.FileReader !== 'function') {
                write("The file API isn't supported on this browser yet.");
                return;
            }

            input = document.getElementById('tinymce-uploader');
            if (!input) {
                write("Um, couldn't find the imgfile element.");
            }
            else if (!input.files) {
                write("This browser doesn't seem to support the `files` property of file inputs.");
            }
            else if (!input.files[0]) {
                write("Please select a file before clicking 'Load'");
            }
            else {
                file = input.files[0];
                fr = new FileReader();
                fr.onload = createImage;
                fr.readAsDataURL(file);
            }

            function createImage() {
                img = new Image();
                img.src = fr.result;
                 editor.insertContent('<img src="'+img.src+'"/>');
                
            }
               
                });
               
            }
                         if($(e.target).prop("tagName") == 'DIV'){
     ...