将图像从本地上传到tinyMCE

Question

tinyMCE 有一个插入图片按钮，但如何处理其功能 请给出一些代码

Answer 1

我赞成了由@pavanastechie编写的代码，但我最终重写了很多。这是一个更短的版本，可能对某些人有价值

    tinymce.init({
        toolbar : "imageupload",
        setup: function(editor) {
            var inp = $('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
            $(editor.getElement()).parent().append(inp);

            inp.on("change",function(){
                var input = inp.get(0);
                var file = input.files[0];
                var fr = new FileReader();
                fr.onload = function() {
                    var img = new Image();
                    img.src = fr.result;
                    editor.insertContent('<img src="'+img.src+'"/>');
                    inp.val('');
                }
                fr.readAsDataURL(file);
            });

            editor.addButton( 'imageupload', {
                text:"IMAGE",
                icon: false,
                onclick: function(e) {
                    inp.trigger('click');
                }
            });
        }
    });

注意：这依赖于jquery，没有它就无法工作。此外，它假定浏览器支持window.FileReader，并且不会检查它。

Answer 2

我使用了pavanastechie和Chris Lear的解决方案，这对我来说非常有用，并希望分享一个基于他们的完整示例，将图像上传到服务器并使用提供的URL嵌入图像回到服务器：

tinymce.init({
  toolbar: 'imageupload',
  setup: function(editor) {
    initImageUpload(editor);
  }
});

function initImageUpload(editor) {
  // create input and insert in the DOM
  var inp = $('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
  $(editor.getElement()).parent().append(inp);

  // add the image upload button to the editor toolbar
  editor.addButton('imageupload', {
    text: '',
    icon: 'image',
    onclick: function(e) { // when toolbar button is clicked, open file select modal
      inp.trigger('click');
    }
  });

  // when a file is selected, upload it to the server
  inp.on("change", function(e){
    uploadFile($(this), editor);
  });
}

function uploadFile(inp, editor) {
  var input = inp.get(0);
  var data = new FormData();
  data.append('image[file]', input.files[0]);

  $.ajax({
    url: '/admin/images',
    type: 'POST',
    data: data,
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function(data, textStatus, jqXHR) {
      editor.insertContent('<img class="content-img" src="' + data.url + '"/>');
    },
    error: function(jqXHR, textStatus, errorThrown) {
      if(jqXHR.responseText) {
        errors = JSON.parse(jqXHR.responseText).errors
        alert('Error uploading image: ' + errors.join(", ") + '. Make sure the file is an image and has extension jpg/jpeg/png.');
      }
    }
  });
}

Answer 3

!!!! ENJOY !!! 这是直接从本地计算机加载的解决方案

JSFIDDLE DEMO

<textarea name="content"></textarea> <title>Local image loading in to tinymce</title> <br/> <b>Image size should be lessthan 500kb</b>

JAVA SCRIPT CODE

`

tinymce.init({
    selector: "textarea",
    toolbar: "mybutton",
    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 4

不要尝试iManager，但发现tinyFCK很好且易于配置，这使得CKEditor的filemanager与TinyMCE集成

1.下载TinyFCK

2.使用你的CKEditor的filemanager文件夹替换tinyFCK中的filemanger文件夹

3.code：

-

tinyMCE.init({
     theme : "advanced",
     file_browser_callback : "fileBrowserCallBack",
});
function fileBrowserCallBack(field_name, url, type, win) {
     var connector = "../../filemanager/browser.html?Connector=connectors/php/connector.php";
     var enableAutoTypeSelection = true;
     var cType;
     tinyfck_field = field_name;
     tinyfck = win;
     switch (type) {
         case "image":
             cType = "Image";
         break;
         case "flash":
             cType = "Flash";
         break;
         case "file":
             cType = "File";
         break;
     }
     if (enableAutoTypeSelection && cType) {
         connector += "?Type=" + cType;
     }
     window.open(connector, "tinyfck", "modal,width=600,height=400");
  }

Answer 5

我知道这篇文章很老了，但是这可能会帮助有人试图找到一个开源文件管理器来获取tinymce：

https://github.com/2b3ez/FileManager4TinyMCE

这对我很有用。

Answer 6

基于@Chris Lear的回答，我重新修改了脚本，以便它支持多个文件上传到服务器，并在发布内容之后以及使用一些小小的PHP脚本更新表之前删除数据图像以供预览

tinymce.init({
        selector: 'textarea',
        setup: function(editor) {
                var n = 0;
                var form = $('#form_id'); // your form id
                editor.addButton( 'imageupload', {
                        text:"IMAGE",
                        icon: false,
                        onclick: function(e) {
                            $(form).append('<input id="tinymce-uploader_'+n+'" class="tinymce-uploader" type="file" name="pic['+n+']" mutliple accept="image/*" style="display: none;">');
                            $('#tinymce-uploader_'+n).trigger('click');
                            n++;
                            $('.tinymce-uploader').on("change",function(){
                                    var input = $(this).get(0);
                                    var file = input.files[0];
                                    var filename = file.name;
                                    var fr = new FileReader();
                                    fr.onload = function() {
                                            var img = new Image();
                                            img.src = fr.result;
                                            editor.insertContent('<img data-name="'+filename+'" src="'+img.src+'"/>');
                                    }
                                    fr.readAsDataURL(file);
                            });
                        }
                });
        },

在php侧面上传php文件：

function data2src($content, $img_path ='') {
        preg_match('/data\-name="([^"]+)/i',$content, $data_name);
        $tmp = preg_replace('/src=["]data([^"]+)["]/i', '', $content);
        $content = preg_replace('/data\-name\=\"/i', 'src="'.$img_path, $tmp);
        return $content;        
    }

Answer 7

它适用于图片上传。是否可以上传文件？我想将本地的自定义文件上传选项添加到tinyMCE中，并希望通过url显示它。

 Code is something like below which not working:


   ed.addButton('mybutton2', {
        text:"File",
        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="*" height="100" weidth="100" 
 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');
                           // var URL = document.my_form.my_field.value;
       alert(input.files[0]);
                    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'");
                       alert( input.files[0]);
                    } else {
                        file = input.files[0];
                        fr = new FileReader();
                        fr.onload = createFile;
                        fr.readAsDataURL(file);
                            //  alert(fr.result);

                    }

                    function createFile() {
                       //what should I write here?
                      ed.insertContent('<a href="'+img.src+'">download 
      file_name</a>');
                    }
                });

            }







        }
    });

Answer 8

我知道这是一个老问题。但是，我认为此答案可能会对想要使用tinyMCE 5.xx上传多个图像的人有所帮助。 基于@Chris Lear和@ stephen.hanson的答案，我修改了一些代码以支持多个图像上传。这是我的代码。希望它可以帮助到别人。

tinymce.init({
toolbar: 'imageupload',
setup: function(editor) {
  initImageUpload(editor);
  }
});

function initImageUpload(editor) {
// create input and insert in the DOM
 var inp = $(`<input id='tinymce-uploader' type='file' name='pic' accept='image/*' style='display:none' multiple>`);
  $(editor.getElement()).parent().append(inp);
// add the image upload button to the editor toolbar
  editor.addButton('imageupload', {
  text:'IMAGE',
  onAction: function(_) { 
 // when toolbar button is clicked, open file select modal
    inp.trigger('click');
  }
});
 // when a file is selected, upload it to the server
inp.on('change',function(){
    for(let i=0;i<inp[0].files.length;i++){
        let file = inp[0].files[i];
        let data = new FormData();
        data.append('multipartFile',file);
        axios.post('/upload/image/url',
        data,
        {
         headers: {
          'Content-Type': 'multipart/form-data'
          }
         }).then(res => {
          if (res.status = 200) { 
              editor.insertContent('<img class="content-img" src="' + data.url + '"/>');
             // clear data to avoid uploading same data not working in the second time
             inp.val('');
          }
      })
  }