TinyMCE 图片上传答案

【问题标题】：TinyMCE Image uploadTinyMCE 图片上传
【发布时间】：2015-11-15 12:05:13
【问题描述】：

自 TinyMCE 4.x 以来，TinyMCE 有一个内置的图像上传功能，但我无法让它工作。

我的代码：

tinymce.init({    
            selector: "textarea",
            plugins: [
                "image","code","autoresize","media","link","imagetools"
            ],
            link_class_list: [
                {title: 'None', value: ''},
                {title: 'PDF', value: 'pdf'}
            ],
            default_link_target: "_blank",
            images_upload_url: "uploadImage.php",
            toolbar1: "insertfile undo | redo | styleselect | bold | italic | alignleft | aligncenter | alignright | alignjustify | bullist | numlist | outdent | indent | link | image | media | code",
            toolbar2: "",
            menubar : false,
            statusbar : false,
            convert_urls: false,
            content_css: 'editor-style.css',
            width: 800
        });

该行：“images_upload_url”应该负责图片上传。附带的php文件如下：

 $imageFolder = "../images/tinymce";

  reset ($_FILES);
  $temp = current($_FILES);
  if (is_uploaded_file($temp['tmp_name'])){
    if (isset($_SERVER['HTTP_ORIGIN'])) {
        header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
    }


    if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])) {
        header("HTTP/1.0 500 Invalid file name.");
        return;
    }


    if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) {
        header("HTTP/1.0 500 Invalid extension.");
        return;
    }

    $filetowrite = $imageFolder . $temp['name'];
    move_uploaded_file($temp['tmp_name'], $filetowrite);

    echo json_encode(array('location' => $filetowrite));
  } else {
    header("HTTP/1.0 500 Server Error");
  }

我错过了什么吗？我在哪里可以找到编辑器中的“上传图像”按钮（我希望它出现在“插入/编辑图像”窗口中）。有没有可行的例子？

【问题讨论】：

嗨，Jeroen，我也遇到了这个问题（没有上传图标）。我相信 TinyMCE 从 4.2 开始就有这种能力，而不是 4.x。你有没有得到你的工作？如果是这样，您介意发布一个描述解决方案的答案吗？
嗨 Swisher Sweet，不，我还没有开始工作，我创建了一个单独的媒体库，用户可以在其中上传文件，目前工作正常，但我想稍后再深入研究。

标签： javascript php tinymce image-upload

【解决方案1】：

我在这里使用 tinymce 4 上传图片：

时间配置：

file_browser_callback: function(field_name, url, type, win) {
if(type=='image') $('#file_name').click(); $('#field_name').val(field_name);
}

见：https://www.tinymce.com/docs/configure/file-image-upload/

表格：

<form enctype="multipart/form-data" id="form_file" style="width:0px; height:0px; overflow:hidden">
<input id="file_name" name="file" type="file" />
</form>
<input type="hidden" id="field_name" value="" />

我使用输入隐藏字段名称在弹出窗口中显示图像链接

javascript：

$('#file_name').change(function(){
var field_name = $('#field_name').val()
document.getElementById(field_name).value='';
var file = this.files[0];
var name = file.name;
var size = file.size;
var type = file.type;
//Your validation
var field_name = $('#field_name').val()
var type = type.substring(0, 5);
if(type=='image') { 

    var formData = new FormData($('#form_file')[0]);

    $.ajax({
        url: "upload/upload.php",
        type: "POST",
        data: formData,
        async: false,
        success: function (msg) {
            document.getElementById(field_name).value = 'http://www.domain.fr/upload/'+name;        
        },
        cache: false,
        contentType: false,
        processData: false
    });

} else {
    alert('Le fichier doit etre une image') 
}

});

php：

header('Access-Control-Allow-Origin: *');


if($_FILES['file']['type'] != "") {
    $source = $_FILES['file']['name'];
    $ext = pathinfo($path, PATHINFO_EXTENSION);
    if(move_uploaded_file ($_FILES['file']['tmp_name'], $source)) { 
        echo $source ;
    }   
}

【讨论】：