WYSIWYG with Action Text

Updated . Posted . Visible to the public.

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

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()
})
Niklas Hasselmeyer
Last edit
Michael Leimstädtner
Keywords
actiontext
License
Source code in this card is licensed under the MIT License.
Posted by Niklas Hasselmeyer to makandra dev (2021-01-26 15:46)