Replacing Trix with Tinymce in Rails 6.1 ActionText

Summary:
If you want to replace Trix you should not use ActionText. It works kind of but adds a lot of Trix-specific content (like the "trix-content" blocks around your edit text which you don't need.

The easiest way is to just add a text-field to your model and use <%= sanitize content %> in your view.

Tinymce was very easy to install. See my summary here.

As Trix is very limited in scope and doesn't allow you to add attributes to elements (for example you can't add target="_blank" to a link to open it in a new tab) and it doesn't allow you to add classes and in general has a lot of problems as it's seems not to be actively maintained it makes sense to look for other options.

After looking around I started to experiment to replace Trix with Tinymce, but was wondering if it makes sense to keep ActionText.

It was surprisingly easy to replace Trix with TinyMCE which was recommended to me in a Reddit Thread.

My Stack:

• Rails 6.1.4
• Ruby 3.0
• jsbundling-rails with esbuild
• Turbo and Stimulus

You just add tinymce to your package.json and run yarn install

You want to wrap Tinymce in a Stimulus controller to easily be able to add it to any textfield.

rails generate stimulus tinymce

This will make every textfield a Tinymce editor.

import tinymce from 'tinymce/tinymce'
import 'tinymce/icons/default/icons'
import 'tinymce/themes/silver/theme';
import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/models/dom';

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="tinymce"
export default class extends Controller {
  connect() {
    tinymce.init({
      selector: 'textarea',  // change this value according to your HTML
    });
  }

  disconnect () {
    tinymce.remove()
  }
}

After that you just add the stimulus controller to the encapsulating block and change the rich_text_area to a text_area (here my views using HAML and Tailwind)

    .flex.flex-col.gap-3.mb-3
      = f.label :add_text_block, class: "font-bold text-xl"
      = f.rich_text_area :text, class: "", id: "editor_#{block.id}"

    .flex.flex-col.gap-3.mb-3{ data: { controller: "tinymce" } }
      = f.label :add_text_block, class: "font-bold text-xl"
      = f.text_area :text, class: "", id: "editor_#{block.id}"

Now your view will show Tinymce Editor instead of Trix editor. And the best part is that all changes get automatically saved. So has_rich_text :text in the model works also with other editors.

Now I just need to figure out how to add links and images to Tinymce and how to customize the elements with attributes and classes. The main reason Trix didn't work for me.

So, the next step is to figure out how plugins work with Tinymce.

Plugins are also quite easy to add. Just import:

import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/image';

And customize it in the intializer:

      plugins: 'link image',  // note the comma at the end of the line!
      toolbar: 'h2 link image',