Anyway to change what each button does?

[liam-edwards]

I was wondering if there was anyway to change what each button does? For instance instead of wrapping text with <strong></strong> when clicking the bold button, I'd like to wrap it with <span class="font-bold"></span> instead.

I was hoping to use Trix in my project as it looked interesting but I can't find any documentation outside of what's in the README which is no good to me.

[avioli]

Use Trix.config.textAttributes to add your own like in: https://github.com/basecamp/trix/blob/7940a9a3b7129f8190ef37e086809260d7ccfe32/src/trix/config/text_attributes.coffee

Trix.config.textAttributes.red = {
  style: { color: "red" },
  parser(element) {
    return element.style.color === "red";
  },
  inheritable: true,
};

Then add the html elements to the toolbar where you want them to like in: https://github.com/basecamp/trix/blob/7940a9a3b7129f8190ef37e086809260d7ccfe32/src/trix/config/toolbar.coffee

You will have to use js though:

const buttonHTML = '<button type="button" class="trix-button" data-trix-attribute="red" tabindex="-1">RED</button>';
myEditorElement
        .querySelector(".trix-button-group--text-tools")
        .insertAdjacentHTML("beforeend", buttonHTML);

If you want to use this editor you'll have to read its code... otherwise - use something else, that is better documented.