Wie kann ich Bilder mit TinyMCE hochladen?

Question

Ich habe die tinyMCE-Dokumentation überprüft, kann aber kein voll funktionsfähiges Skript zum Hochladen des Bilds im Texteditor per Drag & Drop ODER Upload/Durchsuchen-Taste erhalten.

Was ich jetzt benutze ist unten:

<script src='//cdn.tinymce.com/4/tinymce.min.js'></script> 
<script> 
tinymce.init({ 
    selector: "textarea", 
    relative_urls : true, 
    remove_script_host : false, 
    convert_urls : true, 
    default_link_target:"_blank", 
    images_upload_base_path: '../images/tinymce', 
    automatic_uploads: true, 
    file_browser_callback_types: 'file image media', 
    images_upload_url: 'postAcceptor.php', 

    plugins: [ 
    "advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker", 
    "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", 
    "table contextmenu directionality emoticons template textcolor paste fullpage textcolor colorpicker textpattern" 
    ], 

    toolbar1: "newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect", 
    toolbar2: "image | media | cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor code | insertdatetime preview | forecolor backcolor", 
    toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft", 
//image, media from toolbar2 
    menubar: false, 
    toolbar_items_size: 'small', 
    height: 300, 
    style_formats: [{ 
    title: 'Bold text', 
    inline: 'b' 
    }, { 
    title: 'Red text', 
    inline: 'span', 
    styles: { 
     color: '#ff0000' 
    } 
    }, { 
    title: 'Red header', 
    block: 'h1', 
    styles: { 
     color: '#ff0000' 
    } 
    }, { 
    title: 'Example 1', 
    inline: 'span', 
    classes: 'example1' 
    }, { 
    title: 'Example 2', 
    inline: 'span', 
    classes: 'example2' 
    }, { 
    title: 'Table styles' 
    }, { 
    title: 'Table row 1', 
    selector: 'tr', 
    classes: 'tablerow1' 
    }], 

    templates: [{ 
    title: 'Test template 1', 
    content: 'Test 1' 
    }, { 
    title: 'Test template 2', 
    content: 'Test 2' 
    }], 
    content_css: [ 
    '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css', 
    '//www.tinymce.com/css/codepen.min.css', 
    "dist/css/AdminLTE.min.css", 
    ] 
}); 
</script> 

können Sie mir sagen, wie kann ich aktivieren oder Bild tinymce mit hochladen?

Answer 1

Sie benötigen PHP auf Ihrem Server und Sie benötigen 'postAcceptor.php' dort, um den Bildupload zu verarbeiten.

Answer 2

Ich würde anfangen, in der Konsole des Browsers zu sehen, ob irgendwelche Fehler mit dem Versuch verbunden sind, Ihre PHP-Datei aufzurufen - wenn die PHP-Datei nicht aufgerufen wird, wird das Bild sicher nicht gespeichert.

Unter der Annahme, die PHP-Datei tatsächlich aufgerufen wird, würde ich das Hinzufügen Debuggen, die PHP-Datei starten ... zu

• stellen Sie sicher sein genannt zu werden
• sicherstellen, dass der $ _POST Variable das Bild enthält
• herauszufinden, was es tatsächlich mit dem geposteten Bild tut.

Einige Hintergrundinformationen auf dem TinyMCE Bild-Upload-Prozess ...

Der grundlegende Prozess ist, dass TinyMCE eine separate HTTP POST für jedes Bild erstellen, die Sie mit dem Bild-Editor ändern. Es sendet dieses Bild an eine URL Ihrer Wahl (via HTTP POST) basierend auf der Einstellung der images_upload_url Option in Ihrem init.

Der Image-Handler an der URL, auf die in der images_upload_url verwiesen wird (die Sie erstellen müssen) muss alles tun, um das Bild in Ihrer Anwendung zu "speichern". Das könnte bedeuten, so etwas wie:

• Speichern Sie die Dateien in einem Ordner auf Ihrem Webserver
• Speichern Sie die Artikel in einer Datenbank
• Shop das Element im Rahmen eines Asset-Management-System

.. Unabhängig davon, wo Sie das Bild speichern, muss Ihr Image-Handler eine einzelne Zeile JSON zurückgeben, die TinyMCE den neuen Speicherort des Bilds angibt. Wie in der TinyMCE Dokumentation verwiesen dies könnte wie folgt aussehen:

{location: ‚/uploaded/image/path/image.png‘}

TinyMCE wird dann das src-Attribut auf den Wert, den Sie das Bild aktualisieren zurückzukehren. Wenn Sie das images_upload_base_path setting in dem Init verwenden, das dem zurückgegebenen Speicherort vorangestellt wird. Die TinyMCE Seite hat weitere Details über all dies:

https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

Das Netz ist hier, dass TinyMCE weiß, wann ein eingebettetes Bild in Ihrem Inhalt vorhanden ist, aber es kann unmöglich wissen, was in der mit dem Bild zu tun Kontext Ihrer Anwendung, so dass Job (der "Bild-Handler") etwas ist, das Sie erstellen müssen.