插入/上傳圖像到tinyMCE 4.X

Question

我想添加功能到我的tinyMCE 4.X.它是文件上傳器。我試圖用很多方式去做，但沒有人工作。我使用此代碼：

tinymce.init({ 
     selector: "textarea[name=obsah], textarea[name=perex]", 
     theme: "modern", 
     paste_data_images: true, 
     plugins: [ 
      "advlist autolink lists link image charmap print preview hr anchor pagebreak", 
      "searchreplace wordcount visualblocks visualchars code fullscreen", 
      "insertdatetime media nonbreaking save table contextmenu directionality", 
      "emoticons template paste textcolor colorpicker textpattern" 
     ], 
     toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
     toolbar2: "print preview media | forecolor backcolor emoticons", 
     image_title: true, 
     automatic_uploads: true, 
     images_upload_url: '/admin', 
     file_picker_types: 'image', 
     file_picker_callback: function(cb, value, meta) { 
      var input = document.createElement('input'); 
      input.setAttribute('type', 'file'); 
      input.setAttribute('accept', 'image/*'); 

      input.onchange = function() { 
       var file = this.files[0]; 


       var id = 'blobid' + (new Date()).getTime(); 
       var blobCache = tinymce.activeEditor.editorUpload.blobCache; 
       var blobInfo = blobCache.create(id, file); 
       blobCache.add(blobInfo); 


       cb(blobInfo.blobUri(), { title: file.name }); 
      }; 

      input.click(); 
     }, 


    }); 

我選擇圖像後，它顯示了在該地區，這是確定的，但是當我點擊提交，$ _ POST和$ _FILES是空的控制檯在談到錯誤JSON意外的錯誤。你能幫我嗎？如何發送多個圖像？ 謝謝

Answer 1

您可以使用以下代碼按照其文檔建議的方式使用tinyMCE 4.x上傳圖像。 https://www.tinymce.com/docs/configure/file-image-upload/

tinymce.init({ 
    selector: 'textarea', // change this value according to your HTML 
    images_upload_handler: function (blobInfo, success, failure) { 
    var xhr, formData; 

    xhr = new XMLHttpRequest(); 
    xhr.withCredentials = false; 
    xhr.open('POST', 'postAcceptor.php'); 

    xhr.onload = function() { 
     var json; 

     if (xhr.status != 200) { 
     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); 
    }; 

    formData = new FormData(); 
    formData.append('file', blobInfo.blob(), blobInfo.filename()); 

    xhr.send(formData); 
    } 
}); 

要使用此代碼，您只需要創建postAcceptor.php文件PN您的服務器。下面是一個使用MVC的postAcceptor.php https://www.tinymce.com/docs/advanced/php-upload-handler/

<?php 
    /******************************************************* 
    * Only these origins will be allowed to upload images * 
    ******************************************************/ 
    $accepted_origins = array("http://localhost", "http://192.168.1.1", "http://example.com"); 

    /********************************************* 
    * Change this line to set the upload folder * 
    *********************************************/ 
    $imageFolder = "images/"; 

    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.0 403 Origin Denied"); 
     return; 
     } 
    } 

    /* 
     If your script needs to receive cookies, set images_upload_credentials : true in 
     the configuration and enable the following two headers. 
    */ 
    // header('Access-Control-Allow-Credentials: true'); 
    // header('P3P: CP="There is no P3P policy."'); 

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

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

    // Accept upload if there was no origin, or if it is an accepted origin 
    $filetowrite = $imageFolder . $temp['name']; 
    move_uploaded_file($temp['tmp_name'], $filetowrite); 

    // Respond to the successful upload with JSON. 
    // Use a location key to specify the path to the saved image resource. 
    // { location : '/your/uploaded/image/file'} 
    echo json_encode(array('location' => $filetowrite)); 
    } else { 
    // Notify editor that the upload failed 
    header("HTTP/1.0 500 Server Error"); 
    } 
?>