TinyMCE Images...Url and Uploaded

TinyMCE is an incredibly popular text editor, but it's harder to get images working than it should be.

Tags: Ruby on Rails, TinyMCE

Back to Blogs

Everyone knows and loves the TinyMCE text editor. It has a combination of being decently easy to install, having all the features you need, and actually working that you're hard-pressed to find in a WYSIWYG editor these days. (Nerd's note: WYSIWYG stands for 'what you see is what you get' but is pronounced wuh-zee-wig.)

The documentation for the Rails TinyMCE gem is here: https://github.com/spohlenz/tinymce-rails

However, we're going to add to this a little because the main focus of this article is getting you to the point where you can upload images within your post, which is (unfortunately) a whole different can of worms entirely.

Add the Gems

To start out, you want to install the usual TinyMCE gem. You used to need a special image upload gem as well, but it's fortunately no longer necessary.

   gem 'tinymce-rails'

Run your standard bundle install and let's go.

Add the Config File

Create a config/tinymce.yml file with your desired plugins, configuration, etc.

The one I usually use looks something like this:

  - styleselect | bold italic underline strikethrough | indent outdent | alignleft aligncenter alignright alignjustify | blockquote | uploadimage image | link anchor | code codeformat codesample | bullist numlist checklist
  - code | undo redo
  - code
  - image
  - link
  - lists
  - advlist
  - codesample
  - textcolor
  - uploadimage
  - view
  - format
  - table
  - tools

Add the Javascript

Don't forget to put //= require tinymce in your application.js.

Image Uploader

Okay, this used to be way harder. Just follow this guy for the image upload-y bits: https://medium.com/@kristina.kabosiene/manual-upload-rails-6-active-storage-tinymce-5-and-aws-s3-2f139c0b5df4

This will hook it up so your uploaded images are stored in AWS S3. Which is MAGICAL.

Back to Blogs