Laravel Livewire - Install and Configure Initial CKEditor NPM
When working with JavaScript, it is practically impossible not to need to install plugins for specific functionalities, either using the CDN or Node; plugins such as to specify rich text (WYSIWYG), drag and drop, calendars, and a long etc.; you will surely be interested in knowing how you can integrate them into Laravel Livewire and hence the importance of knowing what steps you must follow.
In this book, we are going to integrate CKEditor as a third-party plugin into Livewire, but with this, you will be able to perfectly know what steps to follow when you want to use other plugins and you need to communicate the plugin with Livewire.
It is important to note that we must know the plugin update phase and at that time, replicate the changes to Livewire properties or methods, and that is what we try to reflect in the following section.
CKeditor
CKEditor is nothing more than a plugin for rich content. If you want to add text, images, lists, tables, links, among other things, these types of plugins are great for this purpose.
They are generally used when you want to create posts for a blog or similar.
Install
To install it, we can go to the following page:
https://ckeditor.com/ckeditor-5/builder/
Select any of the listed formats, I recommend the Classic Editor and be sure to disable the premium features unless you want to pay:
Premium Features in CKEditor
Once you have selected the features you want, you must press Next until you reach the final window where you can download the solution:
Configure
Click on download and the important thing in the previous solution is the main.js file, which we must copy into the project:
resources/js/ckeditor.js
In the mentioned file, you will find the CKEditor configuration, as well as the imports, plugin configuration, header and so on, as an important point, we have the reference to the ckeditor module:
***
Undo
} from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';What we should install:
$ npm install ckeditor5Also, comment out or remove the css import defined in the mentioned file:
// import './style.css';We add the new dependency or file in vite:
vite.config.js
input: [
'resources/css/app.css',
'resources/js/app.js',
'resources/js/ckeditor.js',
],And with that, we're ready to go, let's add the HTML needed for the CKEditor, which is nothing more than a simple DIV, along with a top-level DIV for column-based alignment:
resources/views/livewire/dashboard/post/save.blade.php
***
<div class="col-span-10 sm:col-span-6">
<x-label for="">Text</x-label>
<div id="ckcontent">{!! $text !!}</div>
</div>
***At the end of the component, we add the CKEditor script and to create it:
***
</x-form-section>
<script src="{{ asset('js/ckeditor/ckeditor.js') }}"></script>
@vite(['resources/js/ckeditor.js'])
</div>
</div>With this we will have the CKEditor working:
Although in recent versions of Laravel Livewire there should be no problems updating the component through Livewire when writing to some HTML wire:model element, in case you need to make an update before sending the form (that is, when in the developer console, in the network section we see requests, the affected component is redrawn, which in this example would be the save component), you can specify the following attribute:
<div wire:ignore class="col-span-6 sm:col-span-4">
<div id="ckcontent">{!! $text !!}</div>
</div>Video Transcript
Let's learn the steps to download CkEditor in our application so that we can install it later. First of all, we're going to write CKEditor here in case you don't know it, put it in Google.
About CKEditor - WYSIWYG
The first thing I want to tell you about the plugin extension is that it is the good one, as they say, or I see it as the reference, what it refers to plugins of the type what you see what you get, that is, what you see is what you get in html5 or in html in general, that is, in web technologies, and this plugin allows, and you can see this easily from the demos section, to create a box with which we can create rich content, and from here a little bit of its name, at the end, all this is html and we can create all these things, of course, depending on the feature you want to enable, for example, the loading of images, there you have to make additional configurations, since not everything is just formatting, that is, bold italics, h1 h2 hx, paragraphs, etc. There are things that require additional integration, such as the image part, which I am not going to deal with in this course. Basically, there are many plugins of this style, that is, of the type what you see what you get. You can write here what you see is what you get javascript and you will find many results, among them the first one we have, well, the second one CKEditor. We have many. You may like another one, I don't know what it is, but I'll take this one because for me it's a reference, it's been on the market for a long time, it has a pretty solid structure that is extremely customizable and it's the considerations that I take into account when using it, unlike others that may not have been around for as long, it doesn't have as many features as CKEditor.
The bad news about sec editor is that sometimes the configurations get a little stubborn, sometimes it starts to generate some html that it shouldn't or that one wouldn't think of, and also that the installation here is changed all the time, for God's sake, for example, here in the book I have this, it's already outdated for version 37 El Paso. I came here on the download page, I chose it, I downloaded it and that's it, I already had a folder ready to be able to configure here, and from there I started configuring this folder. You can also generate it, but the imports and other things have changed a bit internally and I haven't been able to achieve it through this format, so I also updated it a bit.
Go to the following link:
https://ckeditor.com/ckeditor-5/builder/
And select any option that does not have premium features here these extensions or features some are premium and others are paid some are premium and others are free therefore unless you do not want to go through the checkout as in my case we do not want to go through the checkout we have to go for the free ones you can really select any one and go disabling features.
Steps to follow for Laravel and Livewire
Here it is also important to clarify that these steps are the same as those you would use in basic Laravel in Inertia as well, but the part with Vue varies a little. Obviously, here we would have to place the connector with View. But well, here it would be to see if I think this is the one for Note, we click here to download and here we click here to download here.
Steps only for Node
Remember that when we have this file in node it is again a project in node, therefore here we would have to install dependencies. I am going to come here to the part of my Visual Studio code, here I drag this file and here we have the dependencies that we have to install. Well, by We already have it. So we are ready and CKEditor, which would be what we are missing, so here we have to place the
npm install ckeditor Configure Laravel
By default, when using Tailwind, we will not see a century applied for H1, HX or listings, later we will configure something for this.
Let's see the steps to integrate CKEditor in this case using the solution through node so let's remember that we stayed here with the download of CKEditor And remember that this is a project in node because we have here the json package and the rest I don't care much what it is and everything else although you can also take a look at it then remember that we are using here a project in Laravel Livewire these same steps can be used if you have a basic Laravel project, that is, without Livewire and inertia or anything you understand there, what we are going to do here in resources I am going to create a new folder that is going to be js here you can have this by the way although it is not necessary but right now we are going to install something js to manage the js I think it is quite obvious and here I am going to drag this one called main.js over here that:
***
Undo
} from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';
This is something that should also be present here and well it does not have any of this what a shame well here we have to indicate the file that we just defined curiously I do not know why I do not have the js Here I was a little strange because here it is referencing it but anyway I do not know what happened here I put the c editor which is the file that we created before pending that it has the same name please if not this would fail I suppose This is the next thing you have to do since you need to indicate to bite that is the one that is compiling or interpreting all this what files it has to interpret or handle that in this case is this one that we added right now since this is node again So that is the first step next step install something what is that something should also appear here if we come here It should give you this the npm install ckeditor5 if it does not give it to you in the same way well it is this so we come here and write npm instal or simply i c edito in its version 5 we wait here 10,000 years for it to finish and this would be practically all for Here while this is installing since we configured it here or Well remember that this is expanding the dependency of CKEditor that we just installed So it would be simply now to import that little file that we have here from the file in which we want to use it then I'm going to close all this My God How much stuff I have open here we will go here to the saave of the posts which is where we want to use it I think we missed the ccs but right now we'll go there since everything will not look broken very important.
Once installed we have this one that we have here that is the one that showed you all this is important because it is essential that you understand this these steps are like who say basic in any plugin that you want to install basically The good thing is that here we already have everything configured this really we would have to write it manually but as you can see it is quite long quite prone to errors and unless it is an engineer in CKEditor is to be someone who only works in CKEditor we can take advantage of a solution as we have it here What is the nice thing about sec editor we already have all this preconfigured then we simply have to use it and if you want to change something welcome but it would not be necessary for what is the scope of this course Well finally here we have to import our CKEDITOR for that here at the end of everything you could also import it in the layout but as I only want to use it in a particular part it does not make much sense to load it throughout the entire application So we can load it where we are going to use it here I am going to place the array since later the ccs is missing and we place the location of the caditor and we are before We can copy the relative URL here and place it here pending with the Slashes. In Windows I think it is reversed and this would be all here. Here we save it. And notice that, well, in principle it works correctly:
import { ClassicEditor, Bold, Essentials, Italic, Mention, Paragraph, Undo , Heading} from 'ckeditor5';
import 'ckeditor5/ckeditor5.css';
export default {
components: {
***
ClassicEditor
},
data() {
return {
editor: ClassicEditor,
editorConfig: {
plugins: [Bold, Essentials, Italic, Mention, Paragraph, Undo, Heading ,],
toolbar: ['undo', 'redo', '|', 'bold', 'italic', 'heading',],
}
};
},
}
We create a tag for the CKEditor:
<div id="ckcontent">{!! $text !!}</div>Finally, we see that it is the h2 and it is because we have not loaded the specific ccs for sec editor but it is for more than here you can see the Source Note that this really is an h1 and here it varies That is the important thing more than whether the css is interpreted correctly here or not we will see those little details little by little but again The important thing is that you have this and here you do not have any error in this section In case that for some reason this file has been deleted.
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter