Adding a CMS to Your Pyramid Web App Transcripts
Chapter: A rich editing experience
Lecture: Using SimpleMDE
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: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 pie charm 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: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: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.