CKEditor, Install NPM and Configure the build in a project in Laravel - 4

▶

The next step is to start copying what we generated previously:

https://ckeditor.com/ckeditor-5/builder/

The build that I already have here unzipped any of them right now in the same way we see the content in case you do not know exactly what it is in our project so what is the first thing we have to do here when we are working with this type of projects understand it is a project in which we already have practically ready the build that we made in the editor and we want to export it to our project let's remember a little that laravel already has an integration with node and therefore this can be quite direct So the first thing we have to see here is what we have here in the package.json, the ckeditor dependency:

$ npm i ckeditor5

Meanwhile, which ones are we going to require? Here is the only style sheet we have and here I am going to copy the main one and rename them.

resources\js\ckeditor.js
resources\css\ckeditor.css
 

Imports and Comments in the Code

Here we have the imports. From this section, you start importing dependencies. This wouldn't actually work either, and usually the comments—I think it's the best thing you can do—when everything is ready and you've tested it, you can clean them up. But I think it's a good idea to comment them out from the beginning.

A trick I use is to put two comment symbols (//) at the beginning, so I know that comment is mine and not one that came by default with the plugin. When I see those two comments, I already know they're mine, and then I can easily delete them if they're no longer needed.

Vite Configuration

In the case of Vite, it's important to keep in mind the configuration. I think I explained this before, but basically, when we use Vite—which in this case will be the "compiler," so to speak—what it does is interpret our transpilation (I think that's the right word). That is, it translates our CSS into another CSS that the browser can understand.

A compiler would be, for example, Java, which takes a .java file and compiles it into binary code. But in this case, the same type of code is maintained, such as converting from modern JavaScript to a version the browser understands, or from SCSS to CSS.

Here in the configuration, we place the files we want Vite to interpret. In this case, they would be the ones we defined previously. We also specify the corresponding path:

vite.config.js

export default defineConfig({
   plugins: [
       vue(),
       laravel({
           input: [
               ***
               'resources/css/ckeditor.css',
               'resources/js/ckeditor.js'
           ],
           refresh: true,
       }),
   ],
});

Of course, js editor and ccs editor are what I am placing here. With this we are going to try to start the application. We have not yet configured the plugin as such, but there we have it.