Laravel Checklister. Part 5: CKEditor for Task Form

today we will make our task editing and task adding form a bit more user friendly with adding editor we see wig editor called siki editor this and to be honest this video is quite uncomfortable for me to shoot because i don't have too much experience with those editors i will admit generally i'm a backhand laravel developer and for a long time i haven't worked with those editors last time i touched them personally was sikhi editor 4 so i stick with what i know but new cq editor 5 is pretty radically different apparently from cq editor 4. so this video is not that professional for my site but we do have to implement the siki editor or any editor in fact so if you have any comments shoot in the comments below maybe you know a better editor which has file upload capability which could be easily installed which is free also because there are a lot of premium editors these days on the market from what i've googled but in this video let's stick with cq editor 5 and let's install it to install the simple version it's pretty easy what is not easy what was surprising to me is to find the quick start documentation here on ckeyeditor.com you go to seek editor overview and there's no quick start here or on the menu you need to scroll a bit down and here's the quick start button and then you land on the page which allows you to really easily install the c editor from cdn which is exactly what we want because we use cdn for other assets in this project so we just copy here from cdn that part and then go into our app blade and at the bottom just add cq editor for example here that's step one and then whenever we need to introduce the editor we copy script somewhere for example in our checklist edit blade down below let's create a separate section scripts and section then paste that part then in the main blade app blade we need to add yield scripts so on any page where we need those scripts we will render them so yield scripts and then on the exact page we have section scripts and then query selector should be editor but let's change it to for example task text area and assign that task text area to our text area of the description of the task so id task text area something like that and let's refresh our page and see if it works so this is our checklist edit page and at the bottom we should have yeah we do have c editor let's try to add a new task so for example task 3 and by the way cq editor is automatically changing the height because i thought it's just one line we need to change the css or some kind of styling for the height but not necessarily it is expanding as you type so for example let's make a bold and let's save the task it is saved successfully and now let's take a look at the database it should be saved in html format so yeah we have a new task with paragraphs of html this is exactly what we expected then we need to add the same text area in the editing of the task so if we click and land here we have html without the key editor and let's add the same thing in tasks edit so we have checklists at it so let's copy and paste the same thing into tasks edit blade at the bottom we have the same script and we need to assign the same task text area to our text area here id task text area and we refresh and we have text area here as well as you saw automatically expanded into three rows we can change something here edit and it should be updated successfully and if we edit again it is successfully updated great one thing you need to keep in mind with all the editors or all the html based text areas in your project it may have security issues if you allow your users to add html code in your text areas this minimal cq editor is pretty limited with the tags that it actually applies but if you have another editor which allows for example html and someone could put a script here inside or generate the script this may be a security issue because if you show that page show that data for example let's try to implement now another checklist in here let's show the task description not only the name but the description as well so we open task table blade which is a live wire component that i've created in the course version of this checklister on my teachable i did that for sorting but it's just the same blade so in addition to task name we add task description here let's refresh the page and we have that description and to show that without html you would use in laravel this structure so it would not process the html would not escape that and show as it is like this so in here if someone adds a malicious script it could execute that javascript in this case it is safe for us because the task is edited only by the administrator so by our trusted person but if you allow your users to edit the text be careful with that basically you should limit your editor to only the tags that you trust and do not allow to add any custom html so this was just for demonstrating purposes let's remove that task description from here okay refresh and we're good now for now we won't implement the image uploading ck editor i will do that in the future lesson because that requires a totally separate lesson or even a few lessons to create image upload adapter and we will tackle that in the future for now let's move on to other topics

Channel: Laravel Daily

Views: 39,305

Keywords:

Id: dAT6l6IobkA

Length: 5min 50sec (350 seconds)

Published: Sat May 01 2021