Add An Action Text WYSIWYG Editor To Your Rails 6 Blog Posts With Images | Ruby On Rails 6 Tutorial

hello everyone my name is dean and welcome back to a ruby on rails tutorial wow it feels like it's been almost two months since i've made one of these uh today we're going to be taking a look at action text now this is a topic we've covered before on the channel in fact the first week of the 20 and 20 challenge was an action text blog we used it for the comments in there and i'll have a link to that video somewhere uh but today we're going to be taking a look just at the basic how do you set up action text tutorial part so this is going to be useful for you know comments like we did before or maybe you want like a wysiwyg editor rich text editor whatever you want to call it maybe you want to extend it a bit so that you know you want to add in some videos or something that's something we'll be covering in i guess this week's 20 and 20 challenge video now that i'm back to making these again but today we're going to be setting up like this tricks editor i'm going to show you how to get the images to work because by default if you just pop the like image in there it'll let you embed it or whatever or it'll like attach but the image won't actually show up when you try to use action text so we'll also take a look at that and thankfully i ran into that issue because i'm using a new computer uh and yes so that's something i probably wouldn't have noticed otherwise and there probably would have been some confused comments so this way we can at least like tackle this from the perspective of someone who is brand new to trying to do this but that's enough for me let's go ahead and let's jump into some code okay so the first thing we want to do once we create our new rails application we're going to just close out of these windows let's go ahead and let's create a basic scaffold for us to work with so for this i'm going to say rails g scaffold post i'll give it a title and this is going to be of type string by default so you don't actually need to include this colon string and normally when we create like a blog post or something we usually give it a body of type text but here we're actually going to be using action text for our body so we can just omit that for right now so we'll just say rails g scaffold post title and then we'll run our generator now there's going to be a couple things we need to do after running this generator the first one is let's go into our routes.rb and let's actually set the route of the application to be the post controller index action and then let's come into our app and our assets style sheets and let's delete the scaffolds.scss file now that that's deleted and that we have our root of our application set up let's go ahead and let's run a rails db colon migrate command to migrate the database and then we can run a rails s command to start our server and then we can navigate to localhost port 3000 in our browser and we should get popped into our webpage now hopefully this is zoomed in enough for you guys to see this if we click on new post we can just give this like a blank title or whatever we have our title we can see it we can edit it we can you know destroy it whatever but now maybe you want to add in some like rich text so you want the ability to you know do some blog creation or something so like on my website i have you know these blog posts and if you scroll through them i have like images and pop-ups and stuff like this and it's all neatly formatted and i'm not going through and creating this html every time i do this it's done through a like a wysiwyg editor basically which is what we're trying to set up here so if you want to set up one of these wysiwyg editors in rails now all you have to do is stop your server we'll then clear our console and i'm doing that with control l and then we can just say rails active or no sorry rails action underscore text colon install and that will install the active storage module for action text which is what you use for the images now if i'm not mistaken i should run into some issues here because this is my first time running rails on this computer and it's going to yell me in a couple different ways for the actual images for this but we'll deal with that in a minute the first thing i want to start with is setting up the back end so for that we're going to come into the app and we want to go into our models and our post.rb and then we just want to say that this has rich text and then we want to say it's rich text for the body then we can come into our controllers folder and our post controller and we'll scroll down to the bottom and after the title we'll just permit the body parameter as well so that handles our back end and our middle now we just need to do the actual front end and for that we can come into our views posts and our form.html.erb and in here we'll just create a field and we'll say this is a oops a form dot label for the body let me just close this and clean it up and then we also have a form dot rich text area for the body and then we just need to come into our show page and below this we want to because now we're you know creating the form for the actual rich text so now if we click on new post we'll see that but now once we like submit the post we'd like to be able to actually see this body that we've created and for this let's create just like a div with the class equal to container and we're not actually going to be styling this we're just creating this div as like a placeholder for now and then in here we'll just say this is the at post.body just like we normally would but here we're using the rich text area instead so if i go ahead and i run a rails db colon migrate command because we need to migrate the action text tables and the active storage tables both of which were generated for us with that command this will add it into the database and then we can run a rails s command to start the server up again and then if we navigate to localhost port 3000 again this should hopefully if we click on new post allow us to create our wysiwyg editor post stuff so we can say you know this is my first post and then here we can throw in some lorem ipsum so let's go ahead and let's google for some so let's just look for like a lorem ipsum generator let me just zoom in a bit i'll just go to the first one i see it's not really a generator but i'll just copy two paragraphs to this i'll paste it in here right so we have some bolded text we can also italicize it maybe strike through some of it uh you know we can create like lists so we can say you know bullet list point one two three etc maybe we also want to be able to like do a quote and then down here we can include um an image so i'll just click on this attach files button i'll open up like a image explorer or whatever and i'll just grab like this one for example so we have our image here and then below this will just do some more words or something i don't know so now we have you know a pretty expansive blog post it's it's something looks like a freshman that's trying to impress their peers but you know it's good enough but now if we click create post yeah it's going to be yelling at us and why is it yelling at us well it's sort of two reasons the first one is if i scroll up here it should say no mini magic so in order to get that part working i think we can come into our gem file and if we uncomment this gem image processing and then we stop our server if i run a bundle install command now i think i might have already had this one installed but it should install image processing and the mini magic gem so now if i run rails s the rails s command again and i refresh this page hopefully we get a different error that's complaining about image magic so because i'm on a linux here i can actually just do a pseudo command for that but if you aren't you can just go to google and search for image magic and then you can come to their website and download it from here i'm just going to do a sudo apt get install image magic command and hopefully this is the right command for this looks like it is so i'll type y and hit enter and hopefully that'll install everything for me and then once this is done i should be able to start my server again and the wysiwyg editor should work just fine so if i do this i type rails s hopefully tricks which is what you know action text runs on so action text is just a port of tricks which is used by camp which is you know dhh's i guess second oldest child at this point maybe i don't know one of his children one of his many children um but yeah so now you can see we have the images working we have the rich text and this is all working how you would sort of expect it to now let's say you wanted to style this image right so you can't really go into your show page and say like i don't know at post.body.image dot with equals 400 pixels or something right that doesn't make any sense so how do you actually grab this if you have like 10 images how do you style them how would any of that work so that you can have like a better layout for your blog well inside of your views you'll see that you have this active storage and then you'll see you have this underscore blob that html the uh erb file this is actually where your image attachment happens so in here you can see you have a figure class with the attachment etc you have your image tag which is your blob dot representation so this is your actual image if you wanted to style it and then down here you have your captions or your attachment names whatever you decide to do here so if you wanted to resize this this is the area you'd be doing it in if you wanted to like center this or create some sort of slideshow effect or something this is also where you would be doing this so that's inside of your views active storage slash blobs slash underscore blobs blob.html.erb file now i will be covering this in i guess this week's 20 and 20 video now that i'm back to doing videos again uh and then there we're going to be using this blob dot html.erb file to include the ability to attach videos because i think right now if i click back and i click new post if i try to attach an actual video uh like this intro video i don't think this will actually work right so it's just creating this actual file here so we'll be going through how to like format some stuff in the blob.html.erb file and we'll also be covering how to sanitize stuff like the video tags because right now the video tag isn't being like allowed through so even if i were to create something in like my show page that was you know like a css video tag or whatever this still or css html video tag this still wouldn't work so that's something else that we need to um i guess look at in that video but hopefully this first one it was helpful and that this is you know something you guys were interested in i think other people have covered uh action text before but i've had a couple comments asking for it and people messaging me so i thought i'd just cover it real quick as like a way to get back into the swing of making videos again apparently i have a bing rebates reward so that's exciting too um but okay i don't know what's happening down here i'm just gonna go ahead and cut to the outro video now okay so that's gonna do it for today's video uh hopefully this was helpful you know the usual shtick if this helped you remember to like the video if this didn't help you remember to dislike it because we don't need to subject other people to more bad tutorials you know get the useful ones to the top of the youtube algorithm and get the bad ones downloaded so that we don't have to deal with the bad ones i know that's not the usual youtube talk you get but that's i guess the way we should approach this from an academic perspective i don't know uh but if this video helped you you know maybe consider subscribing there's plenty more coming assuming my computer doesn't catch on fire and as you can see there's plenty of fans on this one so hopefully that doesn't happen but that's going to do it for me i will see you guys in the next video thank you so much for watching [Music] you

Channel: Deanin

Views: 1,928

Keywords: deanin, deanin rails, dean, deanin new tutorials, rails new tutorials, Action Text, WYSIWYG, WYSIWYG Editor, Ruby On Rails, Ruby On Rails Tutorial, Ruby On Rails 2020, Ruby On Rails For Beginners 2020, Rails 6 Action Text, Rails 6, Rails 6 Tutorial, Rails Action Text, Ruby On Rails CMS, Ruby On Rails Blog Post, Action Text Images, Rails 6 Images, Rails Images, Rails WYSIWYG Images, Ruby On Rails Action Text, Action Text Rails, Action Text Rails 6, Dean Action Text, RoR, blog

Id: 7_ScfESnIjk

Length: 13min 32sec (812 seconds)

Published: Sat Jul 18 2020