Uploading image from local into TinyMCE?

Question

I am using TinyMCE. It works great. But I want the feature in TinyMCE where a user can upload the images from local box/or from public websites.

I am using Tomcat, JSP and core Java. I found couple of free third party libraries like ibrowser, imanager, jbimages etc but all of them using PHP which looks like does not fit in my existing project (I don't know PHP but I tried to integrate one of these in my existing project they don't work and give some weird errors). Really I am not sure how to have this feature in TinyMCE (if some other editor support it with JSPs I can try that)?

I looked for similar question on the internet, but every third party is using PHP and I am using JSP not PHP.

Answer 1

I'm maintaining tinymce-rails-imageupload, which provides a plugin for letting TinyMCE upload images from the users machine.

Now, this is meant to be used with Rails, but it should not require too much modifications to work with something else. Or at the very least, you can use the JavaScript/HTML as a basis for your own plugin that integrates nicely with a Java-backend.

My plugin also doesn't handle the storage of the images, and leaves that up to the backend. In Rails, this would be done with CarrierWave or Paperclip, and I'm sure some similar projects exist in the Java world.

I know this isn't really a solution per se, but it can hopefully be used as a starting point.

Answer 2

You should avoid this problem all together actually. If you look at some other popular sites that use TinyMCE, like Tumblr for instance, they actually avoid the issue. Integrating an upload script with TinyMCE is a good amount of work. On the other hand creating an upload form, even an AJAX upload form, isn't TOO difficult.

I'd recommend styling your UI for TinyMCE in a way that allows you to place other controls right above TinyMCE, in this case an upload picture control. This will just open up some standard dialog and allow the user to upload an image. Once this is done you can inject the image directly into body. More over you can use this upload form elsewhere on your site and not have it tightly coupled with TinyMCE.

Once you have all that done, it might not be that hard to just have the image upload icon from tiny execute your upload JavaScript dialog.