从所见即所得本地计算机上载图片 [英] Image upload from local computer in wysiwyg

问题描述

What's我如何添加图片上传从本地计算机在TinyMCE的最佳方式？我发现 IMCE 但它仅仅是为Drupal或不？我需要的解决方案，将与asp.net MVC3工作。后来我发现这个 TinySLUpload ，但我想没有Silverlight的解决方案。 What's我的选择，哪一个是最好的？

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?

推荐答案

!!!!享受！这里是直接从本地计算机加载解决方案

的jsfiddle演示

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

        }

            });

        }

        }
    });
}});

`

这篇关于从所见即所得本地计算机上载图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！