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.
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
Diving into your application.css or scss, we want to remove one key thing here, and that's the
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.
<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>
Transcript written by Miguel
Join 27,623+ developers who get early access to new screencasts, articles, guides, updates, and more.