Bilder und Dateien mit TinyMCE hochladen

Question

In meinem symfony2-Projekt verwende ich TidyMCE in meinen Textareas, um Nachrichten aus dem Backend einfügen zu können. Nachrichten können Bilder im Inhalt oder Dateien enthalten, um PDF-Dateien anzuzeigen. Ich bin neu und ich kann die Bilder oder Dateien nicht hochladen, so dass ich die verschiedenen Ordner durchsuchen kann und einmal eine Kopie auf dem Server gemacht wird.

Ich habe eine Menge Kommentare gelesen, aber ich bin irgendwie gebündelt.

Basic Local Datei-Picker

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

Aber ich verstehe nicht ganz, wo das gesagt: Ich habe auf dem Netz von tinymceel folgenden Code gesehen postAcceptor.php oder bezeichnet mit {location: '/ your/uploaded/image/file'}.

Ich bin ein wenig verloren, alle möglichen Hilfe bitte danken

Answer 1

postacceptor ist Ihre serverseitige Methode, um die Datei zu akzeptieren und sie in Ihrem Server hochladen. Ich verwende mvc, also habe ich eine benutzerdefinierte Route "ImageUpload" erstellt. und ich benutze das stattdessen. Ortsteil ist die erwartete Rendite von Ihrer Methode. Dies ersetzt die Datei location/referrer a.k.a src tag, wenn Sie images_reuse_filename = true verwenden.

Answer 2

Ich benutze Symphonie nicht, aber Ihr Code nach würden Sie die postAcceptor-Datei im selben Verzeichnis wie Form