Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we’ll install an external Django package to create a WYSIWYG (What You See Is What You Get) editor in our admin site.
If you took Customizing Django Templates,
0:00
you might remember creating
a markdown to HTML filter.
0:03
Even if you didn't take that class,
0:07
you can see that custom
filter in course_extras.py.
0:09
So we know that we can save text formatted
in markdown in the course description,
0:13
and it will render with the appropriate
HTML tags in the browser.
0:18
But we're human and humans make mistakes.
0:23
If you make a mistake in the markdown
formatting when typing in your course
0:26
description, you might not notice it for
months unless someone tells you about it.
0:30
In this video, we're going to add
a markdown preview to our admin site.
0:35
When someone types markdown formatted
text into a long text field,
0:40
we'll be able to see how that text will
look once it's loaded into our template.
0:44
Now this part gets a little complicated so
we're going to go slowly, okay?
0:50
We want to add a markdown preview for
the course model, so
0:55
we need to override the template
that's loading in the admin form so
0:59
that we can add a div for
the preview text.
1:03
But since we're editing
the template to add this extra div,
1:07
we only want that div to appear for the
course model and not for any other models.
1:11
So here's what we do, go back over
here and then inside templates, and
1:16
inside the admin directory
inside templates,
1:21
create another directory with the name
of our app, which is courses.
1:25
Now, insides courses,
create another subdirectory
1:30
with the name of the model for which we
want to override a particular template.
1:34
In this case, course.
1:38
And just because I know that we're
gonna need it here in a minute,
1:41
inside course create one more
subdirectory called, includes.
1:46
All right, now the template we need
to override is called fieldset.html,
1:51
but that's included by change_form.html.
1:58
So technically we need to override both
changedform.html and fieldset.html.
2:02
Now we do this by going back to the Django
GitHub repo, and finding change_form.html.
2:10
And just like we did with base_site.html,
we're just gonna copy all of this.
2:17
And then inside course,
2:25
create a new file called change_form.html.
2:28
And just paste all that in there and
save it.
2:34
Now, whenever we hit the back
button in the GitHub repo,
2:39
we can see that fieldset.html is not here.
2:43
We actually have to go up here into
includes to find fieldset.html.
2:47
So you can see why I had you go ahead and
create that subdirectory called includes.
2:52
So now,
we just highlight all of this to copy it.
2:56
And inside the includes subdirectory,
3:02
we create a new file called fieldset.html.
3:05
And paste everything in there and
save that.
3:13
All right, now in change_form.html,
3:17
do a search for fieldset.html.
3:22
So now right here, we need to
change the path to fieldset.html
3:26
because this admin/includes/fieldset.html
isn't accurate anymore.
3:32
So we wanna change it to
3:39
admin/courses/course/includes/fieldset.h-
tml.
3:41
All right, save that and we are done
with change_form.html, so just close it.
3:47
Now over here in fieldset.html,
right here at line 20,
3:54
right after this,
if field.is_readonly else endif.
3:58
We wanna add our own if clause.
4:03
So if field.field.name
4:06
== 'description'.
4:11
Then we're gonna have this div
that we're gonna call preview.
4:15
And then close our if statement.
4:22
Okay, what we're saying here is that
if the field.name is description,
4:28
which is the field for the course
model that will contain the markdown,
4:33
then make a place for
a div that we are calling preview.
4:37
Now we can test that this
div is loading by filling
4:42
it with something random like, Hi, Mom.
4:46
So save that, and
then just refresh this page.
4:49
And you can see that, Hi,
Mom loaded right there.
4:55
So we know we're in the right spot.
4:57
We can see this Description field and
this is the div that contains the Hi, Mom.
4:59
So we're good.
5:04
Still with me?
5:06
All right, good.
5:07
In the next video,
5:08
we're actually gonna get down to business
to create this markdown preview.
5:09
So stay with me.
5:14
You need to sign up for Treehouse in order to download course files.
Sign up