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()
})
