TinyMCE 图片上传 API 未显示图片选择图标

Question

我们按照这个教程的指示操作，但是图片对话框中的上传按钮（图像URL旁边的搜索文件夹图标）出现了问题，没有显示出来。

http://www.tinymce.com/wiki.php/Handling_Asynchronous_Image_Uploads

我们尝试了仅使用images_upload_url选项以及所有选项，但上传图标从未显示：

tinymce.init({
    ...
    images_upload_url: "postAcceptor.php",
    images_upload_base_path: "/some/basepath", //optional
    images_upload_credentials: true //optional
});

这些文章建议您只需指定images_upload_url，TinyMCE就可以允许上传图片。我们正在运行4.2.5版本。此功能自4.2.0版本以来可用。我已经向TinyMCE的母公司Ephox确认，图像上传功能是社区版本的功能。所以有人成功使用了吗？

- Swisher Sweet

Answer 1

它不应该显示一个图像选择器图标。 它会上传你粘贴到编辑器中的文件中的图像。

如果您想要文件选择器，您应该使用file_picker_callback。

如果您想要一个文件选择器图标，您需要将image插入到您的工具栏中。

- Fred

---

谢谢Fred。在折腾了几周之后，我也得出了这个结论。本来想更新我的问题并附上答案，但你比我更快。:) 无论如何，提供一个图像上传API却不允许你从文件系统中上传图像是有些违反直觉的。 - Swisher Sweet

Answer 2

***JS***     

<script>
    function example_image_upload_handler (blobInfo, success, failure, progress) {
      var xhr, formData;
    
      xhr = new XMLHttpRequest();
      xhr.withCredentials = false;
      xhr.open('POST', '/home/uplaodimage');
    
      xhr.upload.onprogress = function (e) {
        progress(e.loaded / e.total * 100);
      };
    
      xhr.onload = function() {
        var json;
    
        if (xhr.status === 403) {
          failure('HTTP Error: ' + xhr.status, { remove: true });
          return;
        }
    
        if (xhr.status < 200 || xhr.status >= 300) {
          failure('HTTP Error: ' + xhr.status);
          return;
        }
    
        json = JSON.parse(xhr.responseText);
    
        if (!json || typeof json.location != 'string') {
          failure('Invalid JSON: ' + xhr.responseText);
          return;
        }
    
        success(json.location);
      };
    
      xhr.onerror = function () {
        failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
      };
    
      formData = new FormData();
      formData.append('file', blobInfo.blob(), blobInfo.filename());
    
      xhr.send(formData);
    };
</script>


  <script>
      tinymce.init({ selector:'textarea.editor', 
image_title: true, 
        automatic_uploads: true,
        file_picker_types: 'image',
      images_upload_handler: example_image_upload_handler,
      convert_urls: false,
  </script>

PHP

$accepted_origins = array("http://localhost","https://yoursite.com");
        // Images upload path
        $imageFolder = dirname(BASEPATH) . "/uploads/";
        reset($_FILES);
        $temp = current($_FILES);
        if(is_uploaded_file($temp['tmp_name'])){
            if(isset($_SERVER['HTTP_ORIGIN'])){
                // Same-origin requests won't set an origin. If the origin is set, it must be valid.
                if(in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)){
                    header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
                }else{
                    header("HTTP/1.1 403 Origin Denied");
                    return;
                }
            }
          
            // Sanitize input
            if(preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])){
                header("HTTP/1.1 400 Invalid file name.");
                return;
            }
          
            // Verify extension
            if(!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))){
                header("HTTP/1.1 400 Invalid extension.");
                return;
            }
          
            // Accept upload if there was no origin, or if it is an accepted origin
            $immage_name= $temp['name'];
            $filetowrite = $imageFolder .  $immage_name;
            move_uploaded_file($temp['tmp_name'], $filetowrite);
          
            // Respond to the successful upload with JSON.
            echo json_encode(array('location' => '/uploads/'.$immage_name));
        } else {
            // Notify editor that the upload failed
            header("HTTP/1.1 500 Server Error");
        }

     

- user13091150