tinyMCE - come gestire i caricamenti di immagini

Question

Ho un sito dove le persone pubblicano notizie, è scritto in PHP.

Fino ad ora, le persone che pubblicavano storie avevano una textarea per l'immissione del testo e un campo modulo per caricare un'immagine per la storia.

Ora sto aggiornando il sito e sto pensando di offrire alle persone maggiore flessibilità, quindi ho intenzione di utilizzare un editor di testo WYSIWYG javascript.

Dopo aver esaminato il più popoular, o almeno quelli che ho trovato su google, penso che tinyMCE sia il meglio documentato e questo è il motivo per cui penso che ci andrò, anche se ho appena lavorato con esso per 4-5 ore, quindi non mi interessa davvero se dovrò passare a un altro editor.

Quando si trascinano le immagini nell'area di testo, tinyMCE codifica l'immagine in base64 e la utilizza come attributo src per il tag immagine.

Mi chiedevo, c'è un modo per rendere tinyMCE caricare le immagini sul server come file in modo da poterle gestire con php (creare miniature, nominarle e memorizzarle come vorrei)?

In caso contrario, c'è un editor in cui sarebbe un'opzione?

Answer 1

C'è un altro plugin per tiny mce che è gratuito e open source. È possibile utilizzare questo
http://justboil.me/tinymce-images-plugin/

Answer 2

V'è un gestore di file plugin pagato chiamato MCImageManager

Oppure si potrebbe integrare uplodify o come nel add immagine pop-up, l'aggiornamento poi quando viene caricato un'immagine il file tinyMCEImageList.js.

Answer 3

Prova PDW File Browser. A differenza della sua pagina web, è veramente buono (e intuitivo, secondo me, dal momento che offre una GUI simile a MS Windows File Explorer).

Answer 4

Ecco una semplice opzione per caricare immagini da TinyMCE direttamente da un pulsante della barra degli strumenti utilizzando Plupload senza bisogno di finestre popup aggiuntive. Nota: questo consente di selezionare il file utilizzando il selettore di file ma non supporta il trascinamento.

Aggiungi un pulsante per TinyMCE con un ID 'myButton' e nessun evento click:

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

riferimento questo pulsante nella inizializzazione Plupload:

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', 

Avrai bisogno di scrivere il server codice side per il percorso di caricamento /path/to/upload/the/image per salvare l'immagine e rispondere con l'URL alla nuova immagine.

Infine cattura la risposta caricato e aggiungere il tag immagine per TinyMCE:

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

Il codice sorgente completo è qui (Testato su TinyMCE 4.1.9; Plupload 2.1.2): https://gist.github.com/danielflippance/e1599fd58ada73b56bfb

Answer 5

mi consiglia "Responsive File Manager"

Che è un open-source file manager e l'immagine servizio gratuito realizzato con la libreria jQuery, CSS3, PHP e HTML5 che offre un modo elegante e piacevole per caricare e inserire file, immagini e video.

grandi caratteristiche:

1. upload di file con un semplice drag & goccia.
2. Utilizzare come file manager autonomo, come TinyMCE, CKEditor o plug-in CLEditor o come crossdomain.
3. Molti parametri di personalizzazione come il ridimensionamento automatico delle immagini caricate , la limitazione opzionale delle dimensioni dell'immagine, gli elenchi di file consentiti.
4. Anteprima completa di immagini, video e audio caricati.
5. creazione automatica delle miniature e riallineamento automatico delle miniature dopo le modifiche esterne

e ...