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 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: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.


Talk Python's Mastodon Michael Kennedy's Mastodon