Configuration

Toolbar

Trix uses data attributes to determine how to respond to a toolbar button click.

Toggle Attribute

With data-trix-attribute="<attribute name>", you can add an attribute to the current selection. For example, to apply bold styling to the selected text the button is:

<button type="button" class="bold" data-trix-attribute="bold" 
data-trix-key="b" title="#{lang.bold}">#{lang.bold}</button>

Trix will determine that a range of text is selected and will apply the formatting defined in Trix.config.textAttributes (found in text_attributes.coffee).

data-trix-key="b" tells Trix that this attribute should be applied when you use meta+b

If the attribute is defined in Trix.config.blockAttributes, Trix will apply the attribute to the current block of text.

<button type="button" class="quote" data-trix-attribute="quote" 
title="#{lang.quote}">#{lang.quote}</button>

Clicking the quote button toggles whether the block should be rendered with <blockquote>.

Invoke Action

<button type="button" class="block-level decrease" data-trix-action="decreaseBlockLevel" 
title="#{lang.outdent}">#{lang.outdent}</button>

Invoke External Action If you want to add a button to the toolbar and have it invoke an external action, you can prefix your action name with x-. For example, if I want to print a log statement any time my new button is clicked, I would set by button's data attribute to be data-trix-action="x-log"

To respond to the action, I add an event listener

document.addEventListener("trix-action-invoke", function(event) {
    if(event.actionName === "x-log"){
        console.log("Log called");  
    }