Загрузка изображения с локального компьютера в wysiwyg

Question

Как лучше всего добавить изображение с локального компьютера в TinyMCE? Я нашел IMCE но это только для друпалов или нет? Мне нужно решение, которое будет работать с asp.net MVC3. Затем я нашел это TinySLUpload , но я хочу решение без Silverlight. Какие у меня варианты, а какие лучше?

Answer 1

!!!! НАСЛАЖДАЙТЕСЬ !!! Вот решение для загрузки непосредственно с локального компьютера

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+'"/>');

        }

            });

        }

        }
    });
}});

`

Answer 2

Вышеупомянутое решение для загрузки изображения непосредственно на TinyMCE было отличным, и на самом деле оно отлично работает с моей стороны.Просто небольшая проблема с insertContent , он не показывает изображение с моей стороны, поэтому я сделал небольшое изменение.Вместо использования insertContent замените его, используя editor.dom.create и editor.selection.setNode (image) , чтобы добавить элемент изображения.И не забудьте отменить привязку события change , чтобы избежать множественного связывания, которое может привести к дублированию вновь загруженного изображения, зависит от того, сколько изображений вы уже загрузили.