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 in our Pin Trading website we have no need for the following, so we remove 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

Ruby Rails

Removing fields with a Rails migration

Ruby on Rails gives you powerful tools to make removing old fields easy, lets walk through how we can do this

JavaScript

Calculating Instagram Velocity From Your Browser

A small script that lets you quickly work out the velocity for posts within a hashtag