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.
Attribute | Where | Purpose |
---|---|---|
data-no-bold | The controller root element | When this attribute is present, the controller will hide the button to apply 'bold' styling |
data-no-bullet-list | The controller root element | When this attribute is present, the controller will hide the button to apply 'bullet list' styling |
data-no-code | The controller root element | When this attribute is present, the controller will hide the button to apply 'code block' styling |
data-no-heading | The controller root element | When this attribute is present, the controller will hide the button to apply 'heading' styling |
data-no-italic | The controller root element | When this attribute is present, the controller will hide the button to apply 'italics' |
data-no-strikethrough | The controller root element | When this attribute is present, the controller will hide the button to apply 'strikethrough' styling |
data-no-link | The controller root element | When this attribute is present, the controller will hide the button to insert 'anchors/links' |
data-no-indents | The controller root element | When this attribute is present, the controller will hide the button to apply 'indentation' |
data-no-number-list | The controller root element | When this attribute is present, the controller will hide the button to insert 'numbered lists' |
data-no-quote | The controller root element | When this attribute is present, the controller will hide the button to insert 'block quotes' |
data-no-file-uploads | The controller root element | When 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.