tinyMCE - comment gérer les téléchargements d'images

J'ai un site où les gens postent des news, il est écrit en PHP.

Jusqu'à maintenant, les gens qui post des histoires avaient un textarea pour la saisie de texte, et un champ de formulaire à télécharger une image pour l'histoire.

Maintenant je me suis mise à niveau du site, et j'envisage de donner aux gens plus de flexibilité, de sorte que j'ai l'intention d'utiliser un javascript éditeur de texte WYSIWYG.

Après l'examen le plus popoular, ou au moins ceux que j'ai trouvé sur google, je pense tinyMCE est la mieux documentée et c'est pourquoi je pense que je vais aller avec elle, bien que j'ai travaillé avec elle pendant environ 4-5 heures, donc je ne me soucie pas vraiment si je vais devoir passer à un autre éditeur.

Lorsque vous faites glisser-déposer des images dans le textarea, tinyMCE code pour l'image en base64 et l'utilise comme l'attribut src de la balise image.

Je me demandais, est-il un moyen de faire tinyMCE télécharger les images sur le serveur de fichiers, de sorte que je peux les manipuler avec php (faire les miniatures, du nom et de les stocker comme je le souhaite)?

Si non, est-il un éditeur qui serait une option?

source d'informationauteur ppp

  1. 8

    Il y a un autre plugin pour tiny mce qui est gratuit et open source. Vous pouvez utiliser cette

    http://justboil.me/tinymce-images-plugin/

  2. 7

    Je vous recommande "Sensible Gestionnaire De Fichiers"

    Qui est un open-source gratuit gestionnaire de fichiers et le gestionnaire d'image faite avec la bibliothèque jQuery, CSS3, PHP et HTML5 qui offre une belle et élégante façon de télécharger et insérer des fichiers, des images et des vidéos.

    tinyMCE - comment gérer les téléchargements d'images

    FONCTIONNALITÉS :

    1. Télécharger des fichiers avec un simple drag & drop.
    2. Utilisation en tant que stand-alone gestionnaire de fichiers, TinyMCE, CKEditor ou CLEditor plugin ou que crossdomain.
    3. De nombreux paramètres de personnalisation comme le redimensionnement Automatique des téléchargées
      les images, en Option limitation de la taille des images, des Fichiers de permis de listes.
    4. Prévisualisation complète de téléchargé des images, des vidéos et des audios.
    5. Création automatique de vignettes et de remaniement Automatique de vignettes d'après les changements externes

    et ...

  3. 3

    Il y a un plug-in payant gestionnaire de fichiers appelé MCImageManager

    Ou vous pouvez intégrer uplodify ou telle dans l'ajout d'un popup image, puis, quand une image est téléchargé la mise à jour tinyMCEImageList.js fichier.

  4. 1

    Voici une solution simple pour télécharger des images à partir TinyMCE directement à partir d'un bouton de barre d'outils à l'aide de Plupload sans avoir besoin supplémentaire de fenêtres popup. Remarque - cette fonction vous permet de sélectionner le fichier à l'aide du sélecteur de fichiers, mais ne prend pas en charge le glisser-déposer.

    Ajouter un bouton à la tinymce avec un ID "mybutton" et aucun événement 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);
        });
    }           
});

    De référence de ce bouton dans la Plupload initialisation:

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

    Vous devez écrire le code côté serveur pour télécharger votre chemin /path/to/upload/the/image pour enregistrer l'image et d'y répondre avec l'URL de la nouvelle image.

    Enfin attraper le téléchargement de la réponse et ajouter votre balise image de 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);
    }
}

    Code source complet est ici (Testé sur les TinyMCE 4.1.9; Plupload 2.1.2):
    https://gist.github.com/danielflippance/e1599fd58ada73b56bfb

  5. 0

    Essayer Assistant EMPAQUETAGE et déploiement Navigateur de Fichiers. À la différence de sa page web, il est vraiment bon (et intuitive, à mon avis, car il offre une interface graphique similaire à MS Windows, l'Explorateur de Fichiers).