How to Install and Use CKEditor 5 in Laravel

hello friends welcome to my channel so in today's tutorial we study how to install and use ck editor file in laravel so this is my laravel instance i have open it in my editor and we will learn how to use ck editor phi in our laravel application so ck editor is a rich text content editor which allow us to enter different html tags in our content in actual word on our website pages we need rich content on our page like headings paragraphs then images and stuff like that so ck editor allows us to use those content for our application now to get started at first we need to download our build of ck editor so i am picking classic build here and download it now what our goal is convert the text area into the ck editor so let's start with it at first we need to define routes create controller view and call it through the route so i'll open the terminal here and define the route for it so route get editor and i will keep the my controller name as editor controller so let's create this controller then we require the blade file here so i just name is as editor dot blade dot php so here i define the form why it's not getting not sure it has method post i think something wrong happening with my okay let me type it action i defined as store then i have text area i keep it name as editor id as editor then we require csrf token let's give the p tag to this so our submit button will be on next line okay so we need to define this we have defined this route and name then next define this store route so instead of get our method here is post store store now open this controller so here i am calling my view file which name is editor and next method is store request request fine now when i run this route here i can see my text area now extract this package and we have to copy our ck editor files into the our laravel project so what i do is i go to my public directory and create a folder called ck editor here and in this directory i copy the all files and folders from the downloaded package okay now i am going to include this js file into our view file so as this js file under the public directory i'll use asset method i said my directory name is ck editor and my file name is also same ck editor js now on this text area we need to call our ck editor so you will get the documentation for it installation quick start here so i copy this code and paste it here so document.queryselector id is editor which i already pass here now if i reload the page it should load this ck data here we go this is that much easy now if i need if i want to catch the content from our editor in my controller you have to just follow the regular form fields which we get using the request object so request input editor this editor is the name of text area now if i type something something like this let's make it bold and submit it like this now this is the simple ck editor we have integrated but as we said we need some times to upload images into our ck editor and by default ck editor does not allow us to upload the images directly because logically speaking when we browse the image into the ck editor we need to upload them on the server side so let's see how to do this now in case of ck editor you need to declare custom image adapter for this now if i go to here custom upload adapter so on this page you get the code for adding the custom upload adapter into the ck editor we will use this code and all rl project but before that we need to perform some steps on the laravel side as we need to upload images we need to create the directory where we can store those images like device so for this i create this symbolic link of our storage folder hprt sun storage link when we upload the images images can be of any resolution and if that image of image is large then it will not fit into ck data nicely so to overcome this issue we need to create the thumbnail version of our original image and return all those images in the response to ck editor and then seek editor fits those images in into the editor so for that to resize the image i'm going to install the library called intervention image so let's install it using the composer command so until the package is installing we need to do some configuration for intervention images so just opening the document for it here into the config app.php file we need to add these lines so let's open the app.php and comes to the providers array providers array package service providers so in the providers array add this line copy it paste it to the alice's array we need to add this line class analysis like this now to use this intervention image we need to include facade here like use image fine now okay now to allow the image upload feature we need to copy this code so i just grab this code and let's replace this line with our copied code now there is so much return in this javascript code but what i need is here i am going to pass the route and in the method map to this route i will write the code for uploading images now to define the route i [Music] just define this route then i will keep the name as upload to my route and to this route of course we need to pass the csrf token then now this route i will define little bit slightly different using the name method so route post let's keep it name as editor image upload then my controller name method name will be upload and let's keep the name as upload which we already pass into the our this uh here we have passed it now we need to define upload method here public function upload request request now here we need to write the code which uploads the image on laravel side so i have this code ready actually so i'm not going to type each and every statement manually so let me copy paste the code here so this is the code to upload files on laravel site so what this code will does is it takes the image from the ck editor and upload it inside the um here under this storage folder it will create the directory called uploads and thumbnail under the upload directory we we will have original image and under the thumbnail directory we will have the image and i have passed here width as 500 and height as 150 but it will be cropped you means by maintaining the aspect ratio so here i am resizing it and finally to do ck editor i am passing the both version of images now let's run the code i open my console because if we get some error so it will be easy to deduct debug it refresh it and let me browse the image good so yeah here we send the ajax request and in the response we got the url for our two images now if i go to my directory here under the uploads directory i have original image which size is around 128 into 853 and under the thumbnail i have stored the resize version now the size is 225 into 150 now this image you can access on this server side and along with this image of course you can add some content also um i think i miss the anc type attribute enc type multipart form data okay now let's try it again okay submit ah okay it's not getting image because here i need to change one statement to this result here they are passing only default image url so here i need to pass hold the response to the result method let's try again yeah it gets resize now if i enter some content and submit yeah we got the image along with the content so yeah this is how how to install and use ck editor file in laravel so i hope you understand the tutorial guys and if you like the tutorial please subscribe to my channel thanks for watching video have a nice day

Channel: Artisans Web

Views: 9,522

Keywords: ckeditor 5, editor js, html text editor, html editor, rich text editor, wysiwyg editor, wysiwyg html editor, ckeditor 5 in Laravel, editor js in Laravel, html text editor in Laravel, html editor in Laravel, rich text editor in Laravel, wysiwyg editor in Laravel, wysiwyg html editor in Laravel, Laravel

Id: lMe6scNMJMA

Length: 19min 24sec (1164 seconds)

Published: Sun Oct 17 2021