Image upload from local computer in wysiwyg

问题:

What´s the best way how can I add image upload from local computer to TinyMCE? I found IMCE but it is just for drupal or not? I need solution which will work with asp.net MVC3. Then I found this TinySLUpload but I want solution without silverlight. What´s my options and which is the best?

回答1:

!!!!ENJOY!!! here is the solution to load directly from local computer

JSFIDDLE DEMO

`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'){
        if($(e.target).parent().find('input').attr('id') != 'tinymce-uploader') {
        console.log($(e.target).parent().find('input').attr('id'));                                
            $(e.target).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") == 'I'){
        console.log($(e.target).parent().parent().parent().find('input').attr('id')); if($(e.target).parent().parent().parent().find('input').attr('id') != 'tinymce-uploader') {               $(e.target).parent().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+'"/>');

        }

            });

        }

        }
    });
}});

`

回答2:

The above solution for uploading image directly on TinyMCE was great and in fact it works on my end perfectly. Just little issue on insertContent, it doesn't show image on my part so I did a little change. Instead of using insertContent replace it using editor.dom.create and editor.selection.setNode(image) to add image element. And don't forget to unbind the change event to avoid multiple binding that may cause to duplicate newly uploaded image depends on how many image you already uploaded.

setup: function (editor) {
            editor.addButton('mybutton', {
                text: "Image",
                icon: false,
                onclick: function (e) {
                    if ($(e.target).prop("tagName") == 'BUTTON') {
                        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(changeImage);

                        function changeImage () {
                            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;                                    
                                var image = editor.dom.create('img', { src: img.src }, "");
                                editor.selection.setNode(image);

                            }
                            $('#tinymce-uploader').unbind("change", changeImage);
                        }

                    }                    

                }
            });
        }