Skip to main content

TrixModifierController

Purpose

Stimulus controller to change what formatting an Trix Editor/ActionText rich_text_area can apply. You may not want to allow the user to apply bold, italic, underline, strikethrough, or superscript, styles, or upload embedded files. This controller allows you to specify which formatting options are disallowed.

The controller also handles drag-n-drop events and paste events, so that disallowed formatting is not inherited from pasted text.

Data Attributes

This controller is configured by providing the following data attributes. Their presence on the controller will determine which formatting options the controller will disallow.

AttributeWherePurpose
data-no-boldThe controller root elementWhen this attribute is present, the controller will hide the button to apply 'bold' styling
data-no-bullet-listThe controller root elementWhen this attribute is present, the controller will hide the button to apply 'bullet list' styling
data-no-codeThe controller root elementWhen this attribute is present, the controller will hide the button to apply 'code block' styling
data-no-headingThe controller root elementWhen this attribute is present, the controller will hide the button to apply 'heading' styling
data-no-italicThe controller root elementWhen this attribute is present, the controller will hide the button to apply 'italics'
data-no-strikethroughThe controller root elementWhen this attribute is present, the controller will hide the button to apply 'strikethrough' styling
data-no-linkThe controller root elementWhen this attribute is present, the controller will hide the button to insert 'anchors/links'
data-no-indentsThe controller root elementWhen this attribute is present, the controller will hide the button to apply 'indentation'
data-no-number-listThe controller root elementWhen this attribute is present, the controller will hide the button to insert 'numbered lists'
data-no-quoteThe controller root elementWhen this attribute is present, the controller will hide the button to insert 'block quotes'
data-no-file-uploadsThe controller root elementWhen this attribute is present, the controller will hide the button to attach file uploads, and prevent drag-and-drop file uploads.

Side Effects

If the <trix-toolbar> is not present, the controller will install a MutationObserver to watch for its arrival.

Installs event listeners on the <trix-editor> element to handle paste events, and strip out disallowed formatting.

If data-no-file-uploads is enabled, the controller will install event listeners to prevent drag-and-drop file uploads.

How to Use