Removing unused Trix Editor buttons

How to quickly remove unused Trix Editor buttons from your site

There are some buttons that come with the Trix editor that aren’t going to have a use case in all applications. You can remove them with CSS.

It is a 2 step process, first, find the class of the button you want to remove. Right click on the button and inspect it, it will have a class like trix-button--icon-name-of-button

Then in CSS you can hide it from view with a display:none.

For example on project, we have no need for the following, so we removed them!

.trix-button--icon-increase-nesting-level,
.trix-button--icon-decrease-nesting-level,
.trix-button--icon-strike,
.trix-button--icon-code { display:none; }

Recent posts View all

SEOInterviews

WebLinkR Interview - we spoke with SEO Reddit Mod WebLinkR about, well, SEO

A short interview with SEO Reddit Mod WebLinkR about some of their SEO thinking.

Productivity Web Dev

81% of people more wary of dependencies due to AI

We polled people about how they felt about software dependenices since more folk used AI