#158: Trix Editor

Phoenix 1.6

Trix 2.0.4 on NPM

Follow along with the episode starter on GitHub

Trix website

---

In this episode let’s add a rich text editor to an Elixir Phoenix application. The editor we’ll use is called Trix. Developed by Basecamp, Trix is a simple, easy-to-use editor.

We’ll update the “summary” field on our album form to use the Trix editor. Whereas now we can just include plain text. Adding Trix will give our users the option of adding some simple styling, including the ability to add links.

Let’s get started.

Because Trix is a JavaScript package, let’s go to npm and copy the install command. Then let’s go to the command line and install Trix.

$ npm i trix
...

Great, now let’s open our app.js and import trix.

assets/js/app.js

...

import Trix from "trix"

...

Then let’s open our app.css and we’ll import trix.css so the trix editor itself is styled.

assets/css/app.css

...

@import '../../node_modules/trix/dist/trix.css';

...

Alright, now let’s open up the form that we want to include Trix on - our album form. To use trix we’ll just need to include the <trix-editor> element. Now because we want to use this with our existing album summary content we can see in the docs that we’ll need to add an input with a value that matches the id of the existing textarea.

So let’s add input="trix-editor" to the <text-editor> element and then id: "trix-editor" to the original textarea.

Template path: lib/teacher_web/templates/album/form.html.heex

...
<%= label f, :summary %>
<%= textarea f, :summary, id: "trix-editor" %>
<trix-editor input="trix-editor" >
</trix-editor>
<%= error_tag f, :summary %>
...

Now if we start our server.

$ mix phx.server
...

And go to our form in the browser. Great, our Trix editor is being displayed. But so is our original as well. Let’s remove that. We’ll go back to our template and hide our original textarea.

Template path: lib/teacher_web/templates/album/form.html.heex

...
<%= label f, :summary %>
<%= textarea f, :summary, id: "trix-editor", hidden: true %>
<trix-editor input="trix-editor" >
</trix-editor>
<%= error_tag f, :summary %>
...

This looks good - now only our Trix editor is displayed. Let’s go ahead and update our summary and Trix makes it easy to make changes, go back, add links, and different styling options. With these changes Trix is automatically updating the value of our hidden input so it can be persisted to the database.

It saved our summary, but now it’s not being displayed correctly on our album page. Let’s update this to use our newly formatted text. We’ll need to open our template that’s displaying the content we used Trix to edit our album show template and use the Phoenix.HTML.raw.

Template path: lib/teacher_web/templates/album/show.html.heex

...
<strong>Summary:</strong>
<%= raw(@album.summary) %>
...

Now if we go back to the browser - perfect our summary is formatted like we expect. Trix has several different ways to customize our text in the toolbar. However, what if we needed to customize the options displayed.

For example, Trix supports file attachments, but we don’t want to support them in this app, so let’s remove it from the toolbar.

To do that, we’ll go back to our app.css and we can update the CSS to not display that option. Each toolbar option will have different CSS rules to customize it, but I’ll just paste in the ones for the icon attachment.

assets/css/app.css

...

.trix-button-group--file-tools {
  display: none !important;
}

.trix-button--icon-attach {
  display: none !important;
}

...

With those saved let’s go back to the browser - and great - we see our attachment option is not longer displayed in the Trix toolbar. We were able to easily add Trix and integrate it into our application.