tinyMCE - how to handle image uploads

13
votes

I have a site where people post news, it is written in PHP.

Up to now, people who post stories had a textarea for the text input, and a form field to upload an image for the story.

Now I am upgrading the site, and I am considering giving people more flexibility, so I plan to use a javascript WYSIWYG text editor.

After reviewing the most popoular, or at least the ones I found googling, I think tinyMCE is the best documented and thats why I think I'm going to go with it, though I've just worked with it for around 4-5 hours, so I don't really care if I'll have to switch to another editor.

When you drag-drop images in the textarea, tinyMCE encodes the image in base64 and uses it as the src attribute for the image tag.

I was wondering, is there a way to make tinyMCE upload the images to the server as files so that I can handle them with php (make thumbnails, name and store them as I wish)?

If not, is there an editor where that would be an option?

5
phpjavascriptjquerywysiwygtext-editor
I've used CKEditor which has CKFinder as a non-free addition to handle media, is that an option for you? - gunnx
U may use elfinder plugin for tinyMCE: google.ru/search?q=tinymce+elfinder - Sergey
@gunnx non-free code could be an option, depending of course on the time to integrate and the cost. I 'll examine it as an option. - ppp

5 Answers

8
votes

I recommend "Responsive File Manager"

Which is a free open-source file manager and image manager made with the jQuery library, CSS3, PHP and HTML5 that offers a nice and elegant way to upload and insert files, images and videos.

enter image description here

GREAT FEATURES :

  1. Upload files with a simple drag & drop.
  2. Use as stand-alone file manager, as TinyMCE, CKEditor or CLEditor plugin or as crossdomain.
  3. Many customisation parameters such as Automatic resizing of uploaded images, Optional limiting of image dimensions, Files allowed lists.
  4. Full preview of uploaded images, videos and audios.
  5. Automatic creation of thumbnails and Automatic realignment of thumbnails after external changes

and ...

7
votes

There is another plugin for tiny mce which is free and open source. You can use this
http://justboil.me/tinymce-images-plugin/

3
votes

There is a paid plugin file manager called MCImageManager

Or you could integrate uplodify or such into the add image popup, then when an image is uploaded update the tinyMCEImageList.js file.

1
votes

Here's a simple option for uploading images from TinyMCE directly from a toolbar button using Plupload without needing additional popup windows. Note - this allows you to select the file using your file picker but doesn't support drag drop.

Add a button to tinymce with an ID 'mybutton' and no click event:

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

Reference this button in the Plupload initialization:

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

You'll need to write the server side code for your upload path /path/to/upload/the/image to save the image and respond with the URL to the new image.

Lastly catch the uploaded response and add your image tag to 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);
    }
}

Full source code is here (Tested on TinyMCE 4.1.9; Plupload 2.1.2): https://gist.github.com/danielflippance/e1599fd58ada73b56bfb

0
votes

Try PDW File Browser. Unlike its web page, it is really good (and intuitive, in my opinion, since it offers GUI similar to MS Windows File Explorer).