Setting up CKEditor WYSIWYG Editor in Laravel Inertia with Vue
Extending an application with existing plugins and extensions is an everyday task, so, as shown in the previous chapter, when we installed and configured Oruga UI in the project, we are going to use another plugin in the Laravel Inertia project; in this case, the CKEditor plugin for rich content in posts.
CKEditor is nothing more than a plugin for rich content, if we want to add text, images, lists, tables, links, among other things, these types of plugins are great for that purpose.
We are going to use the native integration of CKEditor for Vue 3, which requires installing two packages, the CKEditor for Node, and the extension for Vue:
$ npm install ckeditor5 @ckeditor/ckeditor5-vueIn the official documentation:
https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/vuejs-v3.html
You can see that they also use another one:
$ npm install ckeditor5-premium-featuresBut it is paid:
https://ckeditor.com/docs/trial/latest/guides/overview.html
Now, it is configured at the project level in Vue, just like the rest of the plugins:
resources/js/app.js
import { CkeditorPlugin } from '@ckeditor/ckeditor5-vue';
***
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, App, props, plugin }) {
return createApp({ render: () => h(App, props) })
.use(plugin)
.use(CkeditorPlugin)
.use(ZiggyVue, Ziggy)
.use(Oruga)
.mount(el);
},
progress: {
color: '#4B5563',
},
});And finally we are ready to use it to do so we are going to open the file
resources/js/Pages/Dashboard/Post/Save.vue:
<div class="col-span-6">
<!-- <textarea
class="rounded-md w-full border-gray-300"
v-model="form.text"></textarea> -->
<ckeditor v-model="form.text" :editor="editor" :config="editorConfig" />
</div>
***
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',],
}
};
},
}Resources such as CSS and plugin functionality are imported you can place more options in the toolbar as you can see in the official documentation in the source code section
https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html
In which it is a pair between the plugin and toolbar for example the heading one
plugins: [*** Heading ],
toolbar: [*** 'heading'],Next we need to create the configurations CKEditor is a plugin with a huge amount of customization in the book we use minimal customization
https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/vuejs-v3.html
And we have
Important to note
- The use of the vmodel originally used to handle text or content
- The use of settings
When using Tailwind in the application we lose the style applied by default such as the sizes of titles lists etc Therefore to recover this style we define a CSS like the following
resources/css/app.css
/* CKEDITOR */
.ck-editor__editable_inline {
min-height: 400px;
}
.ck-editor__main h1 {
font-size: 40px;
}
.ck-editor__main h2 {
font-size: 30px;
}
.ck-editor__main h3 {
font-size: 25px;
}
.ck-editor__main h4 {
font-size: 20px;
}
.ck-editor__main ul {
list-style-type: circle;
margin: 10px;
padding: 10px;
}
.ck-editor__main ol {
list-style-type: decimal;
margin: 10px;
padding: 10px;
}
/* CKEDITOR */Which you can customize as you like
You can check the source code at
https://github.com/libredesarrollo/curso-libro-laravel-10-inertia-store/releases/tag/v0.5
The next point that we are going to work on is about how to integrate this type of plugins into our application in this case it is something more than anything based on View because on the server side we are not going to do absolutely anything That is to say we are going to use the inertia layer with Vue in case you do not know what an editor is it is simply a plugin of the type Why see what you get that is to say what you see is what you get those are the acronyms that we have here you can enter here on the official page and here we can start to see a little bit of what we have it has a paid part but it also has a free part it has various formats here you can give it I think it was that it seems to me you can see that multiple technologies are available including here larabel and the one that interests us right now which would be vue 3 for the integration layer with laracel and in examples you can find various designs since it has a kind of wrapper or wrapper in which you can vary the design This is the one that I always use the Classic one but there are others just as you can see in this case this is the line eh well this one called bon among others that you can see by here is a plugin that has been on the market for a long time it seems quite robust quite good I have not had any problems with them I have been using it for a long time and that is why we are going to use it again here in this application or in this course as a necessary element in this case to write rich content which is what we want precisely for the text that is to say this in a few words this type of plugin that exists many is a kind of Word But for what would be the html or for our web application on the client side again there are many you can put here what you see what you get which were the acronyms that I mentioned to you at the beginning and you put View there or directly in javascript and you will see that there are many on the market but again I use this one For the reasons that I mentioned to you before then we also have one for Vue so so that one can locate themselves a little we could put here Vue editor sec and enter here on the first page that we have here here the installations varied a little since I have them a little different what is it that we are installing here what would be the complement for View well the first thing would be that I do not place it here but it would already be installed as a dependency or should it be installed as a dependency What would be the sec editor that is the plugin Yes then it would be the extension for Vue
$ npm install ckeditor5 @ckeditor/ckeditor5-vueAs I told you it is something quite modular and that is why I like this package for me it is relatively new I do not know how long it has been here but at least a year and a half something like that but it seems to me that it is paid and already with the name well it does not fit me much it says that it has a triar version when I started to look for a little more information about the package and obviously here we are using everything that is 100% free of charge then well I am not going to install it here what we could install would be as I told you the flavor to put it in some way which is what we saw here to see what we have here as I always tell you I install the Classic Although you can try to install another one Although at least for this section if you do not master it much I would recommend that you install the same as me so that you do not have any problems So that is why here you see that I also install the cadit 5 B Classic which would be again the classic version of the same again here it would not be necessary to install the sec editor as shown here because it should be installed as a dependency so clarified this a little we can install it to see what happens I am going to copy this I'm going to come back here, I'm going to stop the application and I'm going to place it apart from this one as it tells you, we're going to install the one for the class editor version, so for that here we place or we can come here quickly so we don't make a mistake Class editor should appear here, npm doesn't seem like it ckeditor Classic npm install let's see what it seems like we waited 100,000 years, would this be good so you don't make a mistake, I'm going to copy it, I'm going to come here and just put the name of the package which would be @ckeditor:
<ckeditor v-model="form.text" :editor="editor" :config="editorConfig" />
</div>
***
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',],
}
};
},
}This should be all Im going to hit enter here and hope for the best now its successfully installed here so we can use it as we use it as I told you at this point we have the connector for Vue and also in what is the core of sec editor to be able to use an interface like the one we have here what we have here this is also completely customizable Im not going to go into it for time reasons and I also dont want to as they say take a specific editor course You can customize this quite a bit with plugins that you can install optionally and also with configurations that you can make again Im going to do a basic example of this so the next point is to configure sec editor in our application in View as discussed before because we define an extension for View so for that here we have the deuse caditor as is you can see here the package that we imported well that we installed before so we open the control js package here Im going to lower this a little bit here we can run the same way
npm run devAnd everything should work correctly you can see that I had no problem Im going to go down a little and import somewhere Now here we put import sec editor Ah look now you found it good excellent then Im going to put it here this is it seems to me that it is an import without a name at least thats how I had it So Im going to remove this and Im going to rename it a little bit ck editor I prefer it like this and we put it here we save and see what happens here Well Im going to raise it again because I think I didnt do anything perfect I dont think well have problems there we have it and now with this we could use it how we can use it its quite simple you can also see this in the official documentation but here I have everything more closed were going to go to the component where we want to use it we import as who says flavor I think its well said and now we have here a component called caditor that we could use thanks to the import that we did just now or the one we did just now here we create the editor Well here I think we can grab one of these editor right now we test it and we configure it here and the BM too so that would be all very simple now with this we would not require the one above although you can also leave it there if you want So we are going to come here and we are going to do the process I am going to go down here a little bit we are going to come here to the part of well first import to import the package I am going to place it up here with the packages we place
import { ClassicEditor, Bold, Essentials, Italic, Mention, Paragraph, Undo , Heading} from 'ckeditor5';It would be This I think that Mania with the keys to see Classic editor c editor is the one I have here perfect How good that the autocomplete works for me I did not install anything because I asked It should be something from Only that sometimes it does it sometimes it doesnt then Then its a matter of luck and I import it here as one of the components now we are going to go to the Data part that I do not have because I have to define it I am going to open the Data one here I think it is this There it is I put editor two points I am going to place it as I put it right now in the book and right now I do some tests Editor and here I put the one in this Classic editor the package that we imported a few moments ago here I missed to see this because it is in red I think it has always been good we come here to see there is something that blew up there lets see okay we have a problem with a dependency I think now it is an import with a name here what it is indicating is that it no longer provides an export by default So it would be by name I am going to check the official documentation and there I check well checking here Now this is the import This is the official documentation these are things that always change so I put this in key here it also says that it is simply CKEditor Well I like to force things so I dont know if I can put it completely okay Okay its in the app Note that if we have a problem Then I put it with a name I am going to remove it CKEditor is the one that I am going to define here to see if it takes it like that and there it took it then they changed some little things there with the imports that happens well We have not done anything yet we have not configured the plugin So lets go there to see what destiny awaits us already at this point we should be able to use the component that I indicated to you before CKEditor I am going to go up to here to see where the tables are I mean the text one that we defined I dont see it Here it would be to comment on this control K Go down a little and now we define the one that I was telling you c editor Well this one no longer works the autocomplete there we close it and here we place Editor that is equal to editor point editor which was what we defined editor in the Data and we place here the bodel which would be the same as above model which is where it is obviously going to place the content form Tex we wait here to see I dont see that anything has changed as something else has changed here it also indicates it did not solve the component I am going to install this package also because I may not have installed something here I installed well As you saw before the class ditro and the whole thing This was what it installs
Then it may require something additional there since this This example in a certain part is the official documentation here you can see it clearly it is a little bit of what I am trying to do and here is the component and here is what is importing it imports some additional materials as I told you you can customize it Here you have an example but the component should exist by defining it here then we execute and No not yet well many things changed really it is what the official documentation already gives I will show you a little bit here I configured the options manually if I remove them in the same way I am going to do these tests so you can see what happens it appears like a dead block before yes some appeared by default how strange I think this is recent because I configured one a few months ago anyway we have to configure this manually so that the options that were there before here as we had and the editor then if it shows you a little bit of the code the imports I also changed them because if not they give errors with the that I was showing before Im going to go down a little bit its not caditor aas its not sec aditor its not caditor CKEditor 5000 Classic but directly this here we have the Classic and also the packages that we want to import here we have more you can go seeing them and you can go importing more then here are the packages you can see this again in the official documentation you put editor vue 3 here and there you will have the official documentation again The ccs is also necessary because if it doesnt appear eh in this quite broken way which we dont want then It should appear with a nice design and here the imports we indicate
/* CKEDITOR */
.ck-editor__editable_inline {
min-height: 400px;
}
.ck-editor__main h1 {
font-size: 40px;
}
.ck-editor__main h2 {
font-size: 30px;
}
.ck-editor__main h3 {
font-size: 25px;
}
.ck-editor__main h4 {
font-size: 20px;
}
.ck-editor__main ul {
list-style-type: circle;
margin: 10px;
padding: 10px;
}
.ck-editor__main ol {
list-style-type: decimal;
margin: 10px;
padding: 10px;
}
/* CKEDITOR */What is the flavor so to speak of the dryer that we are going to use and here is a text that we leave there as an example that is not necessary and does not appear because this would be the one to edit if I go here to create it lowers the zoom a little bit I will also come here to create quickly post create Well here that text should appear but it does not worry me because well I am not interested but it does not even work so I think there is a problem in the official documentation anyway here the plugins as I indicated and here how do you want to Show the options in the tobar that if a dor redo bold yalit that are the options that you can see that we have here as you can see then it is basically that So if you want more options here for example I added the paragraph You would have to go here to this this other page that we have here I am going to give it here back that round it showed you the Flavors and here notice that we have this option here you can give it source code so you can see how all this is placed the image part is a bit laborious because I am not going to deal with it in this course either because there you have to do a you have to receive it from side where the server Then you have to do an additional development well you come here where it says Index js and here you can see all the headers that you can import Here it is important that you may not understand that or I have not clarified it better said is that apart from importing the package here which is what we are doing you also have to define it here in the header and vice versa if you define it in the header you have to import it since if for example here the one here I placed the one of I remove this one and I think the one of paragraph also bu Im going to leave it like this Lets see Look the hiding one does not appear Although I have it defined here if I import it Then you already know what the hell it is and here you can see it is a matter of seeing what you have to import based on the naming that the plugin has it is a little bit as who says forced some things but when you more or less master it I think you can like it a lot because it is very very customizable as you have been able to see but it does have its quirks especially here that it loves to change the imports and so on And also if you remove it from here Then then both the import of the plugins and what you place here do not appear In the tbar it has to go hand in hand for everything to work correctly so thats it as I told you follow the official example a little bit Im also going to update the book what a shame so nothing more to say lets move on to the next class
- Andrés Cruz
This material is part of my complete course and book; You can purchase them from the books and/or courses section, Curso primeros pasos con Laravel Inertia + Vue.js y Tailwind.css.
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter