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?