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) 确认图片上传功能是社区版功能。那么有人让这个工作了吗？

Answer 1

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

如果你想要文件选择器，你应该使用 file_picker_callback.

如果您想要文件选择器图标，您需要将 image 插入 toolbar。

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");
        }

TinyMCE 图片上传 API 不显示图片选择器图标

TinyMCE Image Upload API not showing image picker icon

javascript

tinymce

image

tinymce-4