Adding a CMS to Your Flask Web App Transcripts
Chapter: Rich editors
Lecture: Using SimpleMDE
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now that we have simple MD installed, let's go see it in action First. If we go over, you are make a copy. Your view one of our pages over here,
0:10
like this one. Notice. There's not a lot of help going on here. Like if I enter, there's no continuation of that,
0:20
right? If I come over and I highlight this and want to get bowled a hit command be just shows my bookmarks and it does nothing.
0:26
No tool bars. There's no special view to show what stuff is gonna look like There's a lot of shortcomings that we've already discussed,
0:34
So let's go over here and improve. It turns out it's super super simple. We've already in PM installed simple MD.
0:44
So all we have to do go over to our template, the admin to the edit page we go to under the bottom.
0:53
You can see we're already adding an extra block to inject the additional CSS, and it's very similar for what we want. So we're gonna go to Static.
1:01
But instead of CSS want to go to nude, let's go and copy the path really quick. That will make things easier for us.
1:12
Just say copy path from the content route, I think is what we want. Let's see. Oh, close. You know that thing? Perfect.
1:23
So there's are known model simple indeed. Ist our CSS is gonna be there. And let's just say that that's not misspelled because we can't change it.
1:31
If we look over in our shared layout, we had all right at the top this additional block for CSS at the bottom.
1:40
We also have a similar one for JavaScript, so we're gonna need to put the JavaScript pieces in here. All right? Perfect. If I can keep those together,
1:52
So in here, we're going to say script source equals and let's get the same thing. Make sure you got the right path.
2:00
So copy content route. And then I gotta just clean it up a little bit There we go. All right, Now, this is enough to include it,
2:10
but it's not enough. Toe. Activate it. If you look up here, this is our text area with I d contents.
2:15
Right? What we've got to do is we have to tell it we want to create one of these contents. One of these editors focused on that contents,
2:24
text area. We could do this in a separate JavaScript file, but it's so short, I'm just going to do it here just to keep things
2:29
simple. We'll say Script This year, I'll say, Let Editor equals new, simple mde and into here we passed some options to start it up.
2:41
Well, say element is document get element by I D and what we're gonna give it content? This is actually enough to get it going,
2:52
and I'm not super fan of that. There we go. That is showing is an error because it's not actually in there so this is enough to get it started.
3:02
But one thing that drives me crazy is the spell checker. It's not very rich, and you can't, like, ignore stuff. If it thinks something's misspelled,
3:11
it's gonna like, make it the wrong color constantly. So I'll just say Spell, check her. It's false like that. This might be it.
3:22
Let's see if I've got it right. So we include the CSS file include the JavaScript file and we create an instance of the editor and we just let it go.
3:32
No, we save it. Go back to this refresh. Yes. Look at that. Look how cool this is. So here we got our editor of here. I'll make this bigger, unnoticed.
3:44
All of a sudden, these start to have visual keys like the H two is larger. The bold stuff is bold. The code stuff looks like code.
3:55
And if I go over here, let's say we want 1/4 bullet hit. Enter check it out. It knows as continuing a bolted list ago.
4:02
This is another thing. I love it never really excited. And I want to highlight love it and make a bullet command be there it goes
4:10
If I don't know about Hakkies, I can do that and just press bold, right? Also, you got a bunch of editor stuff up here that's pretty cool
4:19
You can insert images and links. You can preview it right? This is the how it's gonna look like toggle between that. That's kind of cool.
4:28
What I like better is the ability to do side by side editing, so side by side is cooler still right and notice. This is the same rendered version,
4:39
and even as you scroll through one, it's scrolling through the others, right? It's synchronize scroll, so that's pretty awesome.
4:46
And If you want it, you just preview at full screen or like this. How about that? And if you don't really know what the heck markdown is,
4:54
even click this and it'll show you real quickly. This is what Mark down looks like. Like the simple, simple version of Mark down.
5:00
Yeah, well, that's it. We now have this super fancy, I think, quite powerful editor built in. Now it looks it looks simple,
5:10
like it's name says, but actually no ability to have hockey's ability to have the toolbar, the rendering, the side by side editing the what?
5:18
You see what you get. It was a big editor. All those things are awesome. And how all we had to dio was in peer
5:24
install. Simple. Andy had the CSS add the JavaScript and then instead she ate an editor pointed at the contents text area.
5:33
Done. All right, we are back in content management system just got way nicer You gotta log in there and write pages in mark down.
5:42
Well, it's gonna be a joy now,