TinyMCEで画像とファイルをアップロード

Question

私のsymfony2プロジェクトでは、テキストエリアにTidyMCEを使用して、バックエンドからニュースを挿入することができます。ニュースには、コンテンツ内の画像やPDFファイルへのリンクが表示されます。私はこれに慣れていないので、画像やファイルをアップロードすることができないので、別のフォルダを検索して一度選択すると、サーバ上でコピーが作成されます。

私は多くのコメントを見てきましたが、結構です。私は、次のコードtinymceelのウェブ上で見てきました：

基本ローカルファイルピッカー

tinymce.init({ 
    selector: '#editor', 
    plugins: 'image code', 
    toolbar: 'undo redo | link image | code', 
    // enable title field in the Image dialog 
    image_title: true, 
    // enable automatic uploads of images represented by blob or data URIs 
    automatic_uploads: true, 
    // URL of our upload handler (for more details check:  https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_url) 
    images_upload_url: 'postAcceptor.php', 
    // here we add custom filepicker only to Image dialog 
    file_picker_types: 'image', 
    // and here's our custom image picker 
    file_picker_callback: function(cb, value, meta) { 
     var input = document.createElement('input'); 
     input.setAttribute('type', 'file'); 
     input.setAttribute('accept', 'image/*'); 

     // Note: In modern browsers input[type="file"] is functional without 
     // even adding it to the DOM, but that might not be the case in some older 
     // or quirky browsers like IE, so you might want to add it to the DOM 
     // just in case, and visually hide it. And do not forget do remove it 
     // once you do not need it anymore. 

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

     // Note: Now we need to register the blob in TinyMCEs image blob 
     // registry. In the next release this part hopefully won't be 
     // necessary, as we are looking to handle it internally. 
     var id = 'blobid' + (new Date()).getTime(); 
     var blobCache = tinymce.activeEditor.editorUpload.blobCache; 
     var blobInfo = blobCache.create(id, file); 
     blobCache.add(blobInfo); 

     // call the callback and populate the Title field with the file name 
     cb(blobInfo.blobUri(), { title: file.name }); 
     }; 

     input.click(); 
    } 
    }); 

PHPのアップロードハンドラ

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

しかし、置く場所を私はかなり理解していませんpostAcceptor.phpまたは{location: '/ your/uploaded/image/file'}と呼ばれます。

私は少し迷ってしまいました、

Answer 1

postacceptorは、ファイルを受け入れ、自分のサーバーでそれをアップロードするためのサーバーサイド方式で可能なすべての助けに感謝してください。私はmvcを使用しているので、カスタムルート "ImageUpload"を作成しました。私はそれを代わりに使用します。 ロケーションパートは、あなたのメソッドからの期待リターンです。 images_reuse_filename = trueを使用すると、ファイルの場所/参照先のa.k.a srcタグが置き換えられます。

Answer 2

私は交響曲を使用していないが、あなたのコードに応じて、フォーム