Skip to main content

9 Administrate Custom Fields and the Trix Editor

Episode 211 · October 17, 2017

Use the Trix editor in your admin area using Administrate's custom fields.

Administration Gems Javascript


Transcripts

What's up guys? This episode I'm going to be showing you how to use the Trix editor inside your admin area, and specifically using a gem called administrate. Now, most of this is going to apply to whatever you're using, but admnistrate is my favorite admin gem right now because number one: It's mostly just creating scaffolds for you, but number two, it has this special thing called "field", so each field like a string, an integer, a text area, whatever that is, datetime, you have the ability to create different types of fields, which will denote in the admin how to create the form for that field, how to display it in the show page and how to display it on the index, and you get to choose how you want to format those things, and you can create your own field types, which we're going to do for Trix to embed that and administrate, so let's dive into this.

First thing is first, let's install the administrate gem. I've already installed Trix, and I've included in your application.js and in your application.css, but administrate is separate, your admin areas are generally totally separate where they will have their own application javascript and CSS, and they'll be named whatever they might be named, like admin.css or whatever, but we will dive into that in a minute. Let's get this gem installed so let's run bundle to install it, and then run rails generate administrate:install. This is going to set up the gem, create routes for the admin area and then create our default dashboards for our models that we currently have, so if you add models later you'll have to add them later as well, but I want to point out here you can do rails g administrate --help, and this... Or you can just do rails g --help. This is going to print out all of the administrate generators here. What we're specifically looking for is the administrate assets and field. So we're going to install the assets to our application, we're going to customize them a little bit by adding Trix to it, and then we're going to create a special Trix field that we can use in our admin area, and we don't really care about the rest of these things that is what you can use to tweak some of the views and different things for your resources, but we really only care about tweaking the fields and adding these additional one. So let's run rails generate administrate:assets while we're here and that's going to install all of these assets from the gem into your application, and we're going to go customize that to add in Trix there, but the other thing that we want to do is we want to generate rails generate administrate:field, and if you run this without any options, you'll see the output here, we need to give it a name. We're just going to call it trix, rails g administrate:field trix, and that will create an app/fields/trix_field.rb file, which we can take a look at, so if we open up app/fields we will see that there is just a to_s method here, and it inherits from the administrate field base. Now this doesn't really tell us too much about how all that works, but when we go into index for the field of the Trix field, you will see that it calls this object, so field is actually that trix field object, and the to_s method is called on it which we give it the data which you can assume is the value from your model, and the same thing goes with show, by default just prints it out and our form prints out a text field with the field attributes, and then that data gets automatically added to it. So nothing too special, but let's take a look at how to add the CSS and javascript to administrate so that we can change this field up in the form to include Trix.

Diving into your application.css or scss, we want to remove one key thing here, and that's the *= require_tree. This is going to give you some problems because we've copied in all of the administrate CSS and JavaScript into our asset pipeline, and so if you require tree here, it's going to try to include all of administrate in your main application CSS. Now that's kind of OK, but the thing is we don't need it. None of our users are going to be able to access the admin, and so these files are already being compiled separately. I'll have an application.css for all of our regular users, and then our admins, when they visit administrate, they will see the admin CSS and that will be included and compiled separately. That's all taken care of inside of the gem so we just want to make sure that our application.css does not include administrate in it, and same thing with our application.js, so we're going to require tree, get rid of all of those, and you want to manually require anything like trix, or any of your other files, so if you wanted to include cable.js or posts.coffee, include and require those manually inside of your files. So from here, we can go into the administrate application.js, now it's going to have a required tree, that is ok because it's going to only include stuff from it's administrate folder. That is fine, and so then here we can add something like require trix. The easiest thing might be to put this at the very bottom so if they make modifications to it, you will see Trix is at the very bottom for you. Same thing for the application.css, so let's pull that up. Their application.css imports all of these stuff, let's also well we can either do the asset pipeline require 'trix' up here at the very top, which is what I'm going to do, or you could import it, say at the very bottom as well, now we're going to use the asset pipeline include up here, and that will take care of including that for us.

Now we can go to our form and add the Trix editor like we did before, but this time we're going to say: field.attribute is going to be the name of this, and we're going to then modify the id that is automatically generated, we want to just call it field.attribute as well. The reason for that is we just want to make sure that our field attributes names match exactly, and by specifying both here, we know that they will match every single time and they won't be duplicated across our other attributes in the form.

app/views/fields/trix_field/_form.html.erb

<div class="field-unit__label">
  <%= f.label field.attribute %>
</div>
<div class="field-unit__field">
  <%= f.hidden_field field.attribute, id: field.attribute %>
  <trix-editor input="<%= field.attribute %>"></trix-editor>
</div>

Let's take a look at this, we have the trix form, we have our post dashboard, which is going to render the body as field text, and we can see that here, we can see the text area where you can exapand it, but what we really want now is to change this to trix field so that we can render our new fields, and if this goes well, you'll see this has loaded the JavaScript, the CSS and the trix field of the trix editor and all of that, now we've kept this as a text field up here, and we can go through and delete all of that and we can go through and delete all of that and we can undo and we'll see that that is working, which means that we can go back to the form and change this from a text field to a hidden field, and we just wanted to do that to confirm that our JavaScript was working and it is, so all of that works, and we should be able to go and do something like: "Test all the things", let's unbold all of it, let's update the post, we will see no strong tags anymore if we edit the post, it's all unbolded still, but as you might have noticed, this isn't the easiest way to check the formatting, so maybe it would make sense for our show view to actually sanitize the html and print that out, so now we get the formatted version of that printed out in the show. Our index probably doesn't need the formatting, and really we don't need the entire body anyway so what if we're going to do something like truncate the field for the post index, and so there you go, you see it now has ... and that truncates to the default length of the body, and one cool thing is that if you want to apply this to any other fields on any other model, you can simply change their field type to your new custom field type and that is going to make it so when you edit your title now is in the trix editor as well and it will be displayed everywhere else in the admin at the exact same formatting as the body, so it would sanitize it on the show view and all of that good stuff, but because that's not something we want to do for our title, we're going to move that back to field string, so that goes to show you how easy it is to add custom JavaScript and field types to your administrate admin area, and that's one of the reasons why I like administrate so much, is because I can do this stuff very very quickly in the app and change it around and tweak things and make adjustments without having to do too much digging into the controllers, the views and customizing all that stuff. It works really really nicely, and as you saw here, it might even be possible to pull out a nice little gem for this so that you could include Trix editor into your administrate admin with just including a gem, so you can make this reusable and include that in other places. I will leave that as a challenge to one of you guys, so if you're interested in that, see if you can take what we did in this episode and pull it out into a gem and make that something we could share, and other people can use. So until next episode, I will talk to you guys later. Peace.

Transcript written by Miguel

Discussion