[This is an excerpt from an email I answered on the Rails-Talk list today]
That’s actually pretty hard, but with a bit of work you will be able to pull that off.
You have two basic strategies:
1) Make the user upload the image file somewhere else (like amazon S3 bucket) using their own client (like an FTP client), then copy & paste the URL into your WYSIWYG editor (wrapped inside an image tag) – most editors let you do that easily.
2) provide an interface for the user to upload the image from their computer to your website (I see now why you were going down the paperclip route). Then make some kind of interface that allows them to drop a string-style reference to the image into the WYSIWYG editor. In the app I’m currently working on, we have a special macro inside the editor so you use something like this:
When output, this macro actually replaces the block of text with the image with id 123. (While editing, the editor doesn’t actually see the image, they only see the macro)
If you’re on Heroku, or designing for scale, you have some special considerations when creating a web app that accepts large file uploads. Check out this article here which explains how it is done.
In particular, see the note on this page that says:
Large files uploads in single-threaded, non-evented environments (such as Rails) block your applications web dynos and can cause request timeouts and H11, H12 errors. For files larger than 4mb the direct upload method should be used instead.
If your images files are large (they say larger than 4 MB, but I would even say larger than 500K), you need to do direct upload to S3. This is documented here.
As you can see, this is actually a complicated can of worms (which is why you should strongly consider if option #1 above is better for you since it is much easier and quicker to implement)
You could probably write an uploader using method #2 described above that works with TinyMCE and inserts some kind of high-level macro or the actual image tag using javascript. But you definitely would have to get your hands dirty with javascript.
If you want to go with Method #2, I strongly recommend that you DO NOT do pass-through uploading on Heroku. Although it will work for very small files, at scale you will create long running-request bottlenecks that will affect other users of your app – people who aren’t even using the upload tool will see slow performance. The s3_direct_upload gem (below) is one solution to this problem (it is an implementation of what the Heroku article discusses when it says “Direct upload”)
see also:
Direct Uploads to S3 with Rails & Paperclip
s3_direct_upload gem
As an alternative do “building this yourself,” you might consider this Rails engine-style gem calls Comfortable Mexican Sofa, which serve as a fully-fledged content management system (or “CMS,” you will take notice its cheeky name)
Comfortable Mexican Sofa