Laravel Checklister. Part 5: CKEditor for Task Form
HTML-код
- Опубликовано: 29 апр 2021
- In this video of the series, we implement a simple CKEditor 5 into our forms, for now without image uploading.
Repository: github.com/LaravelDaily/Larav...
Playlist with other Checklister videos: • Creating "Laravel Chec...
- - - - -
Support the channel by checking out our products:
- Try our Laravel QuickAdminPanel: bit.ly/quickadminpanel
- Enroll in my Laravel courses: laraveldaily.teachable.com
- Purchase my Livewire Kit: livewirekit.com
- Subscribe to my weekly newsletter: bit.ly/laravel-newsletter 
Хобби
Thank you very much. Is a perfect adaptador of CKEditor5 in Laravel. :-)
Wow, what you have done is as same as me completely !
Even the blade style is so similar.
I just did a backstage page with Laravel 8、Bootstrap 4 and CKEditor 5 , but I'm seeking CKFinder's solution right now.
thank you! i have been looking for how to do this for a long time :)
To prevent malicious code to be inserted, I usually sanitize the text before saving, by adding the strip_tags php function and explicitly state the tags allowed. That way you secure it on the server side, since client side can be manipulated.
Ok u will save secure data by strip_tags in database, BUT then how u show this data in client? Code executes in client side whatever
@@somebody5252 html special characters
Many thanks, you are my laravel reference
Great tutorial sir thanks a lot 🙏🏻
Awesome content sir.
This style of videos are really great for beginners. It's like Laracasts style series for step-by-step project development, but without a paywall.
Thank you! I struggled getting this to work with Livewire. In case there is anyone else struggling with this, here is what I did:
On the text area parent div, I added wire:ignore. This makes it not re-render. But now the data is also not accessible by livewire, so I added:
ClassicEditor
.create(document.querySelector('#description'))
.then(editor => {
editor.model.document.on('change:data', () => {
@this.set('description', editor.getData());
})
})
.catch(error => {
console.error(error);
});
Thanks it helped me alot.
thank you for making this video.
tinymce editor is a good one. It is more customizable but typically a little more time consuming to get set up properly.
Thank you for your time. WYSIWYG stands for What You See Is What You Get. I was wondering if its possibly to inject the script and style only where you need the editor? So a project wouldn't get bloated with unneccessary scripts and styles
Great tutorial !
but how we can use CKEditor (Or other rich text editors) along with livewire?
Thans again man!
Thank you so much for the tutorial, it's been helpful. But I still find the HTML tags on my display page. please how do i fix it?
Thank you!
Installation with cdn does not work in my project. A preview was displayed, but I could not use any button for edit styling. I fixed it by installing via npm.
I used the CK editor in my project but its returning null when I check the request. do you have any solution. why this is happening and why its working for you.
Quill Editor is a good one :) free
very helpfull
Thank , useful
What is the data type set in database for store richtext editor content.... Please help me
Hello,
I am looking how to upload audio and video files too?
any suggestions
Thank you
Just a little laravel tip. Instead of section(scripts) you can use @stack(scripts) @push(scriots) and @prepand, this make work with scripts more flexible.
In my experience, I haven't found the "flexible" part of @stack very beneficial. How exactly it would be flexible in this exact example, can you expand?
@@LaravelDaily using stack, you can inject from partials too.
@@LaravelDaily in this example maybe no benefits, but if we using this layout on some other pages, where we can put cdn link in prepand and the script just in push
@@LaravelDaily But h thought it could also be easily implemented through the section
Thank you so much I from developer in Viet Nam
Trumbowyg is pretty good, open source with a lot of useful plugins included. It has its pain points like all wysiwyg editors but it's hackable and it beats paying monthly for one just so you can bold and underline a few things. Depends what you need of course..
Hello, should a junior be able to connect such plugins as CKEditor, and for example connect and configure the loading of images through this plugin?
It's not about junior or not junior, it's about the project you're working on. Does that project need a WYSIWYG editor?
Hi there, thank you for this vídeo. i have a problem. when i put text in my textArea and press save button, it doesn't save the textArea text in my DB, why?
i mean, i have it with validations, so, when i press save button it activate the validation error, like "empty textArea", like there is no text in my textArea
Thanks. If You copy-paste from Word doc a unordered list ul -li kind, is pasted into this correctly? I implemented Tiny editor, but that was a nigthmare with Livewire.
Pasting from Word doc into any kind of WYSIWYG editor is a curse, since the beginning of internet. You need to educate clients to NOT copy-paste from Word, that's the only solution I have found over the years.
@@LaravelDaily Thanks, But as I recognised the Tiny MCE can solve the cleaning the Word's classes issues. I will check theis too
I try to use editor it work fine but if I use required attribute in is not submit
How to implement this editor in livewire?
The only wysiwyg editor I've used is summernote, but I ran into problems with it because I was using a theme from creativetim that was poorly done.
In my opinion, 'scripts' should be a @stack, not a @section. That way, you can push only the scripts needed for the view to work instead of loading ckeditor in every other view that does not need it. It also allows subviews to benefit from the @stack without having to worry about overriding the @section.
Good point, I will probably mention this in the next videos.
Summernote is the bees knees, i was able to solve an image upload issue i was having with livewire. All the others suffer from that issue or you only notice that when you upload an image using the wysiwyg editor
Why does everyone add it through CDN? Shouldn't we add it through NPM? I am trying to find tutorial on how to upload it via npm but can't find
I prefer editor js, Quill js & Trix.
I usually use summernote WSYWIG.
can you please add equations part in cke5 ?
Bro when u find please share - i want to implement in maths question editor
anjay, baru ngeh ternyata cara bacanya siki 😅karena saya orang sunda, aeng jadi ngakak 🤣
how we can use ckeditor with a livewire component ? im strugling with this !!
I have this component created: livewirekit.com/components/livewire-ckeditor-form
How implement CKEditor in quickadmin panel using livewire?
Sorry, at the moment we don't have this feature in the Livewire version, or a readymade tutorial for it.
Is ckeditor 5 free ?
Should I use laravel for small projects. your opinion
Do it
Yes, you can
Even on the back of the job, refuses to stall big projects, as they need special optimization
thanks bro, already like and subscribe your channel
I see in DB "DDDD<script>alert();</script>" . It's mean if don't allow to edit source in editor, iCKeditor is secure.
html really may be a security issue, that's why most of the times it is better to use bb code or markdown
Purifier library fixes security issue with WYSIWYG.
Awosem
kindly i want to add popular posts in my show.blade.php how can i do this
show.blade.php is where i display a single post
I have used tinymce as WYSIWYG
In the past I also have used Tinymce, but it seems they became a paid platform now, no? www.tiny.cloud/
@@LaravelDaily You can download it here: www.tiny.cloud/get-tiny/self-hosted/