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

당신이 당신의 서버 PN postAcceptor.php 파일을 작성해야이 코드를 사용합니다. 다음은 MVC를 사용 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"); 
    } 
?>