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

TinyMCE Image Upload API not showing image picker icon

本文关键字：图像 显示图 选择器 图标 显示 API TinyMCE      更新时间：2023-09-26

我们按照本教程中的说明进行操作，但由于某些原因，图像对话框中的上传按钮(图像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)确认过，图片上传功能是一个社区版本功能。有人成功了吗?

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

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

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

***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");
        }
相关文章：