Pasting images in tinymce

I’ve been looking for an improved experience with tinymce for some projects at work.  I’m finding that a lot of the problems we have can be solved with options and plugins that are built into it. I guess reading the manual can come in handy from time to time. One thing that would really be nice is pasting or dragging images into the editor and being able to save it along with the text.  After a little experimenting, I found that in Firefox you can do just that. Unfortunately this is a Firefox-only method right now, but it’s better than nothing.

If you have an image on the clipboard, and you paste in a tinymce instance, it will insert the image by adding an <img> tag with a data: url as the src attribute (this also works with dragging image files from your computer into the editor).  Since it’s embedded in the html, it gets submitted inline when the form is submitted.  Since data: urls don’t work with some browsers, and large images would cause slow page rendering, I whipped up this little (php) function to save the images to disk and update the <img> tag to refer to them:

I use a directory based on the id of the object that is being edited and the md5 as the filename.  It’s not that fancy, but I think it works.  I haven’t done a huge amount of testing on it, so I’m not completely sure that the html->DOM->html process won’t mess up other stuff in your document.

I’m also thinking about a method of using the html5 file API in tinymce to make similar behavior work in other browsers. Any ideas?

5 thoughts on “Pasting images in tinymce

  1. Great little script, thanks! I changed it so that it saves the image as a jpeg, since on my Mac at least, when you copy an image to the clipboard it’s always in png format.

    I also made it generate the image filename from the alt attribute if it was filled in, and added an $overwrite option if you want it to always overwrite existing images.

    Here it is:
    https://gist.github.com/1648519

  2. Also, you can add the following after line 59 if you want the width and height attributes to be set based on the actual size of the image:

    $imgEl->setAttribute(‘width’, imagesx($imgDataFromClipboard));
    $imgEl->setAttribute(‘height’, imagesy($imgDataFromClipboard));

    An if statement could be added to first check if the width/height were already set, but keep in mind that the image itself wouldn’t be resized…perhaps that could be added to the script too, in case someone resizes the image in TinyMCE.

    1. Great idea for resizing the image based on the width/height attributes. That would prevent the 200 pixel image taking 30 seconds to download :) I’ll try to update my gist with some of your suggestions. Thanks!

    1. It would probably need to be tweaked for your specific needs (specifically where the images are stored), but the $string variable is the value coming from a tinymce textfield that might have images dragged into it (Firefox only). This function finds images embedded in the string as data: urls and saves the images and replaces the url with the new location.

      Hope this helps!

Leave a Reply