tinyMCE - wie man mit Bild-Uploads umgehen kann

Question

Ich habe eine Seite, wo Leute Nachrichten veröffentlichen, es ist in PHP geschrieben.

Bis jetzt hatten Personen, die Stories posteten, ein Textfeld für die Texteingabe und ein Formularfeld, um ein Bild für die Story hochzuladen.

Jetzt aktualisiere ich die Seite, und ich überlege, den Leuten mehr Flexibilität zu geben, also plane ich, einen Javascript WYSIWYG Texteditor zu verwenden.

Nach der Überprüfung der meisten popoular, oder zumindest diejenigen, die ich googeln, denke ich, tinyMCE ist die am besten dokumentiert und das ist, warum ich denke, ich werde damit gehen, obwohl ich gerade damit für gearbeitet habe 4-5 Stunden, also ist es mir egal, ob ich zu einem anderen Redakteur wechseln muss.

Wenn Sie Bilder in den Textbereich ziehen, wird das Bild in base64 von tinyMCE codiert und als src-Attribut für das Bild-Tag verwendet.

Ich frage mich, gibt es eine Möglichkeit, TinyMCE die Bilder auf den Server als Dateien hochladen, so dass ich sie mit php (Thumbnails, Namen und speichern Sie sie, wie ich möchte) umgehen kann?

Wenn nicht, gibt es einen Editor, wo das eine Option wäre?

Answer 1

Es gibt ein weiteres Plugin für kleine MCE, die frei und Open Source ist. Sie können diese
http://justboil.me/tinymce-images-plugin/

Answer 2

Es ist ein bezahlter Plugin-Datei-Manager MCImageManager genannt

Oder Sie könnten integrieren uplodify oder so in das Bild Popup-Add, dann, wenn ein Bild hochgeladen Update die tinyMCEImageList.js Datei.

Answer 3

PDW File Browser Versuchen verwenden. Im Gegensatz zu seiner Webseite ist es wirklich gut (und intuitiv, meiner Meinung nach, da es GUI ähnlich MS Windows File Explorer bietet).

Answer 4

Hier ist eine einfache Option zum Hochladen von Bildern aus TinyMCE direkt von einer Symbolleistenschaltfläche mit Hilfe von Plupload ohne zusätzliche Popup-Fenster. Hinweis - Mit dieser Option können Sie die Datei mit der Dateiauswahl auswählen, aber Drag-Drop nicht.

eine Schaltfläche Hinzufügen mit einer ID 'MyButton' und kein Click-Ereignis TinyMCE:

tinymce.init({selector:'.use-tinymce', 
    plugins: "code link visualblocks", 
    menubar: false, 
    extended_valid_elements : "span[!class]", 
    toolbar: "undo redo | formatselect | link code | mybutton", 
    visualblocks_default_state: true, 
    setup: function(editor) { 
     editor.addButton('mybutton', { 
      type: 'button', 
      title: 'Insert image', 
      icon: 'image', 
      id: 'mybutton' 
     }); 
     editor.on('init', function(e) { 
      var pluploadHandler = new PluploadHandler(jQuery, plupload); 
     }); 
    }   
});  

Referenz auf diese Schaltfläche in der Plupload Initialisierung:

var PluploadHandler = function($, plupload) { 
    ... 
    this.uploader = new plupload.Uploader({ 
     runtimes : 'html5,flash,silverlight,html4', 
     browse_button : document.getElementById('mybutton'), 
     url : '/path/to/upload/the/image', 

Sie müssen schreiben, um den Server Seitencode für Ihren Upload-Pfad /path/to/upload/the/image, um das Bild zu speichern und mit der URL auf das neue Bild zu antworten.

schließlich die hochgeladene Antwort fangen und Ihr Image-Tag zu TinyMCE hinzu:

this.uploader.init(); 
    this.uploader.bind("FilesAdded", handlePluploadFilesAdded); 
    this.uploader.bind("FileUploaded", handlePluploadFileUploaded); 

    function handlePluploadFilesAdded(up, files) { 
     console.log("+ handlePluploadFilesAdded"); 
     up.start(); 
    } 

    function handlePluploadFileUploaded(up, file, res) { 
     console.log("++ res.response: " + JSON.stringify(res.response)); 
     var img = "<img src='" + res.response + "?" + Date.now() + "'>"; 
     tinymce.activeEditor.execCommand('mceInsertContent', false, img); 
    } 
} 

Der vollständige Quellcode ist hier (Getestet auf TinyMCE 4.1.9; Plupload 2.1.2): https://gist.github.com/danielflippance/e1599fd58ada73b56bfb

Answer 5

ich empfehlen "Responsive File Manager"

, die ein freier Open-Source-Dateimanager und das Bild ist Manager mit der jQuery-Bibliothek gemacht, CSS3, PHP und HTML5, das eine schöne und elegante Art und Weise bietet hochladen und fügen Sie Dateien, Bilder und Videos ein.

GREAT FEATURES:

1. Hochladen von Dateien mit einem einfachen Drag & Drop.
2. Verwendung als eigenständiger Dateimanager, als TinyMCE-, CKEditor- oder CLEditor-Plugin oder als Crossdomain.
3. Viele Anpassungsparameter wie automatische Größenanpassung der hochgeladenen Bilder, optionale Begrenzung der Bildabmessungen, Dateien erlaubt Listen.
4. Vollständige Vorschau der hochgeladenen Bilder, Videos und Audios.
5. Automatische Erstellung von Thumbnails und automatische Neuausrichtung von Thumbnails nach externen Änderungen

und ...