Adding a CMS to Your Pyramid Web App Transcripts
Chapter: A rich editing experience
Lecture: Using SimpleMDE
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now that we've downloaded and saved simple mde here, it's time for us to start using it in our admin page. Let's go have a look at what we have so far.
0:10
Look over here to our admin section and we go to the pages and we can edit one of these. You can see here's to mark down. That's pretty cool.
0:16
Scroll down. But you know, if I highlight this and I hit command be well, my bookmarks show up. That's not amazing. And if I hit, interfere noticed.
0:23
That doesn't say, Oh, we're going to continue this a Nordic bulleted list here. None of that happens.
0:28
So we're gonna add that simple market on editor to this text area right there. That's what we're after.
0:36
Now that's this page, the edit page template, and we're going to do two things we need to add the CSS.
0:42
So remember there were styles like we saw the icons and whatnot for the site, and then we also need to add the JavaScript to make it be more full featured.
0:51
So let's do the first thing here. Let's add some additional script here. CSS gonna go to static and now we're gonna go to Node.
1:01
That's not do this way, is it? I try this maybe will give us some auto complete. Here, last static. Here we go. Knowed modules.
1:08
And in here we have simple mde. And in here we have a dist. And in dist! What do we have? We have simple MD men CSS all right.
1:17
And we want to tell PyCharm That's not misspelled, because you know what? It's not, and we go ahead and just change this to the styles.
1:22
But I don't really like this request thing anyway. Rio Perfect. So that's the style and noticed this additional CSS thing from this shared layout.
1:33
Now let's go look at that real quick, over and shared.
1:39
If we look, you can see there's this section where we're sticking in this extra slot and I think we also want to say omit tag.
1:46
It's true for this one as well. I'm not sure pretty sure that matters.
1:51
Yeah, So when we say that there's thes additional CSS libraries there, No, here and similar to that at the bottom. This for the little editor.
1:59
If we say true here, you know, make it nicer at the bottom we have an additional Js.
2:04
So we're gonna put our JavaScript libraries there as well go including this A little bit. Probably easiest. And that's Js and this can be true.
2:16
Just noticed. Like it gets a warning on. The editors want to put that away.
2:20
It would be fine to just leave it that way, but the editor is freaking out, so let's keep it happy as well.
2:26
Now this section we need to use the simple Js library.
2:29
So we're gonna go over here and say there's a script and the source is equal to slash static node, Same thing.
2:36
But for the JavaScript like that, we go now. We have that added and this is close.
2:46
The next thing we need to do is tell Accrete one of these editors and pointed at the right section.
2:51
So if you go up here and look, our text area has i d contents.
2:55
Okay, So the money to go in here on a Cree Little script section and we're gonna say Let editor equals new simple mde.
3:05
Now we can pass in some extra info here and the extra involved we can pass.
3:11
There's a ton of different configurations we could override the hot keys but could override the icons.
3:16
We can control what's shown on the bars and all kinds of stuff.
3:19
But all we want to do is say the element that you're looking for that is the basically the editor gonna go get It's a document dot Get elements by i d.
3:30
We'll put on tents. Ah, like that. Perfect. So contents, That's the text editor right there. So get it by 80. This might work.
3:39
I think we might need to do a little bit more work to make this go, But let's go ahead and see if this is enough over here again.
3:47
Let's go view the pages. Oh yes, look at that. Here's our cool little editor. We can take it full screen, weaken, do side by side, this trifle screen.
4:00
There you go. Look huge editor, and then we pop it back out. We can go side by side.
4:05
There's the written version, and here's what it's gonna render as Let's go over here and add one more bullet.
4:10
If we enter notice that automatically puts that bullet point there and finally notice how If I put something like this, it'll find its tell me that's misspelled.
4:20
They have fun and I want to emphasize have fun by saying command.
4:24
I noticed it writes the star to make it italicized and even shows in the editor What it looks right.
4:30
Like we could make this in h three by having to hurry by having three to go back to 21 right? So really, really nice editor here.
4:40
It's not super super fancy, but at the same time, I think it really is quite nice. Let's put these back you go.
4:47
I really like that side by side thing, though it helps really figure out what you're working on, right? Even synchronizes the scrolling.
4:54
So there's a lot of these different types of editors out there. But look how incredibly easy it was for us to do that. And you can even get like help.
5:02
If you're new to mark down, I'll give you help here. How easy was it?
5:05
Well, to go from this really unhelpful thing to this, what I'd call pretty advanced editor.
5:12
All way to do is in PM install simple MD Add the right CSS at the top of the file at the right script at the bottom of the file.
5:20
And then finally we have to go and create a new instance of these simple MBE editor by pointing at the text area.
5:28
So this is up here, then don't a text area with the right i d. And that's it.
5:34
Now we've taken and created a beautiful editing experience for all of our users. Those who know Mark done really well. They can use the hot keys.
5:42
They get the auto complete or like carrying on lists and so on. And for those who are new, you get an even better experience.