Rails 6 includes a WYSIWYG editor, Action Text Show archive.org snapshot . It works out of the box quite well, but chances are that you want to add some custom functionality. This card contains some tips how to achieve this.

Setup

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

• We build reliable cloud solutions with Infrastructure as code
• We are experts in security, Linux and databases
• We support your dev team to perform

Read more Show archive.org snapshot

Basically, follow the guide in the Rails documentation Show archive.org snapshot . The automated script may not work with the way webpacker is configured in your project, but it should be easy to fix.

If you don't want the default css shipped with Action Text, you can copy the stylesheet from basecamp's github Show archive.org snapshot into your project (be sure to select the correct version), keep the things you want and remove the things you want to remove.

To add a rich text field to a model, just write

class Message < ApplicationRecord
  has_rich_text :content
end

In the form for the model, add the editor like this:

-# form_with
= form.rich_text_area :content

-# simple_form (update simple_form to at least version 5.0.2)
= f.label :content, as: :rich_text_area

To display the text, write

= @message.content

in the view or, if you want to change the rendered html, some variation of @message.content.body.to_rendered_html_with_layout

Changing the behavior of the editor

You may want to add some functionality to the editor or remove some buttons from the toolbar. For that, you should listen to the trix-initialize event in javascript.

addEventListener("trix-initialize", event => {
  const { toolbarElement } = event.target
  const textTools = toolbarElement.querySelector("[data-trix-button-group=text-tools]")
  const blockTools = toolbarElement.querySelector("[data-trix-button-group=block-tools]")
  const fileTools = toolbarElement.querySelector("[data-trix-button-group=file-tools]")
  
  // Do what you want to change, e.g. add a button for a horizontal rule
  const hrButton = document.createElement("button");
  hrButton.className = "trix-button trix-button--icon trix-button--horizontal-rule"
  hrButton.setAttribute("data-trix-action", "x-horizontal-rule")
  hrButton.setAttribute("title", "Horizontal Rule")
  hrButton.setAttribute("tabindex", "-1")
  hrButton.textContent = "Horizontal Rule"
  blockTools.appendChild(hrButton)

})

If you added custom buttons, add their functionality by listening to the trix-action-invoke element

addEventListener("trix-action-invoke", event => {
  const { editor } = event.target

  if (event.actionName === "x-horizontal-rule") {
    // ...
  }
  
  // Add behavior for the other buttons
  // ...
})

Check the Trix README Show archive.org snapshot to check what you can do.

If you want to prevent (certain) file attachments, you can listen to trix-file-accept:

addEventListener("trix-file-accept", event => {
  event.preventDefault()
})