Add A Rich Text Editor To A Django Blog - Django Blog #21

what's going on guys John elder heard from khou-tv comment in this video I'm going to show you how to add a rich text editor to our blog with Django and Python alright guys like I said in this video we're gonna add a rich text editor to our blog but before we get started if you like this video I want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and check out code me.com where i've dozens of courses with hundreds of videos that teach you to code use coupon code youtube wantin to get $30 off membership that's all my courses videos and books for a one-time fee of just $49 which is insanely cheap so in this video we're gonna add this rich text editor so we can stylize our blogpost we can add images there's an image button we can add bold and change styles and things do different sizes and add emojis I guess and all kinds of stuff so so we're gonna use something called the CK editor it's Jango CK editor and this will allow us just drag and drop this thing right in here and we don't even really have to write any code to make this work so it's super easy it should only take just a few minutes to do and it really adds a lot to our blog right so let's head over to our terminal let's come to our terminal break out of our terminal and just clear the screen and we want to pip install Django - CK editor and should just take a second to install now in order to use this thing we just have to make a quick change to our model and then we can just start using it so let's head over to our code and let's go to our blog directory and let's find our models dot PI file and then here at the top we just go from CK editor dot fields import rich text field right so the are the T and the F and rich text field are capitalized so these are fields you know our form has form fields so we're using from fields import rich text fields so now we need to come down to our body and let me just copy this and comment it out so we have it to refer back to but we need to change this now the body field is where we type in all of our content for our blog post right it's the body of our blog post and so here we just need to go rich text field and then go blank equals true comma null equals true so go ahead and save this and now we've made a sort of a major change to our model so we need to make a migration and push that migration so let's head back over to the terminal here and let's go python manage pi make migrations and we've done this before make sure migrations is plural okay so we've created a migration that we need to push that migration so python managed pi migrate anytime you're dealing with databases it's always a two-step process you make a migration push for migration we've done this before so we know how to do it so all right let's go python manage pi run server to make sure to get our server back going now we've added this thing we've added to our models we have to actually add it to our settings dot pi file so let's let's see let's close some of these out here let's go back to our main a blog directory and our settings dot pi file and come down here to our installed apps and we just need to add a new app and the thing we need to add here is CK editor okay so if we save this and now head back over here and let's say let's go to well we can add a post we can see there's thing hasn't appeared right so we still need to add it to our blog itself but if we go to our in min section and click on posts and let's say we want to we want to edit a post here or something you can see it's already working in our admin area so that's very very cool right so now in order to use this thing on our actual blog we need to make a couple of changes so let's head over to our code and let's look at our templates file or our templates directory let's find the add posts so this is the post that adds an actual blog post right so to put the form on the page that we have now we use this form as P so we can actually just copy this and add another one and then instead of form as P we just do form media let's go ahead and save this head back over here now when we add a post boom this box appears and it works now here's one interesting thing if we create something a so let's call this bold text and the title tag is in bold text you want to put it in coding and let's this is some bold text right and now we kind of highlight this and click the B right here and now it says bold right so let's post this and you can see it's showing up bold here and if we click on the thing it shows up bold here but that's only because we added that safe tag of many videos ago so if we look at our code and it's that say let's see what was that the article detail page right where we're outputting the blog post on the page if we look through here we see we added this safe flag right here if we take this off let me just copy this and delete it and save this and come back here you see now that HTML doesn't work and so none of this will work so for this to show up anywhere you have to put this safe thing and that's this and that's true here I've got to save it again save this file it's true here it's also true on our main page here right so okay that's all there is to this now if we click here and we want to edit this that box doesn't appear there we need to change this also in our edit page so that would be update post at HTML same thing here we just copy this guy paste it in again change this to media save it come back hitler reload boom now you can play around with this there's all kinds of stuff we could do we can add an image so let's go I don't know let's go to coda me.com and you good images here maybe this guy view image so get the URL for this image if we wanted to add this here we could click the little image button and our URL we can type in some other things we see a preview boom that works we click update it's right in there all right so all kinds of cool stuff you can do with this change colors right the source code change format and now this isn't a particularly at a link right this isn't a particularly robust one but we can add a table actually it is not so bad I had some flash that's still a thing special characters right so it's a pretty good one and for the ease of use you can't you can't go wrong now there are other rich text editors you can use tiny mice tiny MCE that's spelled ti NY MC e you can look into that one if you want it's also got a Django version that you can add similarly to the one we added this one and that one may or may not be a little more robust it's been a while since I looked at it but I mean shoot for the time it took body tag P tag to install this this is pretty amazing right and all we had to do was pip install it add it to our settings not Pi file make a quick change to our model spy file push that migration and it just works so that's all for this video if you liked it be sure to smash the like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and check out code me comm are you gonna use coupon code youtube one to get thirty dollars on membership they pay just $49 to access all of my courses over 40 courses hundreds of videos and the PDFs of all my best-selling coding books jo-ann over a hundred thousand students learning to code just like you my name is John elder from Kota be calm and we'll see in the next video

Channel: Codemy.com

Views: 33,287

Keywords: django rich text editor tutorial, django rich text editor, django-ckeditor demo, django ckeditor tutorial, django ckeditor upload image, django-ckeditor 5, django-ckeditor, python django rich text editor, python django ckeditor, django blog rich text, django blog app, django blog, django tutorial, python django, django blog rich text editor, django blog images, django blog links

Id: mF5jzSXb1dc

Length: 8min 13sec (493 seconds)

Published: Thu Jun 04 2020