How To Setup Ckeditor 5 On Your Website || CKEditor Quick Start Guide

[Music] hello everyone welcome back to the channel in this simple tutorial i'm going to show you how to configure ck editor 5 on your website so in my previous tutorials i've been using ckd4 and someone requested to show them how to configure seeker editor five on their website if in case it's the editor of their choice that they want to use and that's what you're going to be looking at in this simple tutorial so just go on google yay look at my training searches all right just type in seeker editor and the first link secret editor the wysiwyg html editor what you see is what you get with wig just click there let's make this one full screen so scroll down it's the latest editor i'm going to agree to their cookies because i like cookies then click seek editor 5 overview then when you reach this page go to the download section where you see my cars are rotating and when you reach here they will show you different builds so we have ck editor 5 classic there is balloon balloon broke inline undochment but for this tutorial this is the one that you have to work with the ck editor 5 classic but i also show you how to use balloon and inline if at all is what you want so we are going to use classic leave the it's the default selected build then scroll down if you're using npm you can install this where npm the node package manager save it to your project or you can download the zip package or use the cdn the content delivery network link so you'll be just getting this online but if i told you want it to be in your project for the case of loading faster then you have to delete this and put it on your server so we are going to download the zip package click there so it already exists i already have it but i'm just going to add a duplicate just click ok and then i'm going to save it on my desktop i want to save it on my desktop i want to create for it a folder i'm going to call it editor so save it anyway you want in your project so i'm just going to save it here and say start download it's already downloaded how fast was that i thought it was lagging but it's already downloaded it i want 5g like so let us extract this i'm going to say extract here but you can use any extracting software that you want or you have on your pc i have 7zip i also have the default windows which is extract all and i'm just going to say extract here and they're going to create a new folder and it has everything that we need but the important file that you want right now is ck editor.js all right we can delete this we don't need it zip package then you can rename this folder to anything that you want just going to call it ck editor and press enter now what you're going to do is open this folder the one you put on your desktop or anywhere there any place that you'll be working on then open it in your favorite text editor so i'm going to open mine in vs code so open vs code in this current directory of code dot so we are opening vs code editor in the current directory very very simple so we have our ck editor the one that we renamed inside now let us create a simple file i'm going to call this index dot html so you can call it anything you want but for this case we are going to call it index.html everything is slow on my pc geez all right two months later it created this file so we are going to create a simple structure for our page now i'm going to call this ck editor 5 and let us open it in the browser using live server so open with live server and they are going to bring it here very very simple let us put them side by side all right so we are good to go in our body let us create a simple div and give it an id of editor so this is user defined the id you can call it anything you want my id your id this id so we have called it editor very very simple so before the closing body tag we are going to link to our ckeditor.js file the closing tag of our script tag then we pass in the source attribute and for the source attribute this way we want to find that file so we have a folder called sega editor is the one that you specify here ck ck editor then word slash and the beauty with vs code it will show you the different files in that directory that you are trying to access and the file that you want is called ck editor dot js very very simple now below that script tag you create your own internal script tag let me just write script so you can create an external by external what i mean you create another folder here called js and inside that folder you put your file that you'll be using but for this scenario or this case we are going to use some internal javascript code so we are going to write in the same document so it's internal on the same page now since we downloaded the classic ck editor build then we are going to initialize it with this classic editor method of create so right classic the c is in capital so classic then editor also in capital so it's camel case so classic this is in capital editor the e is in capital then you say dot create since it is promise based so dot create so this is the method that you have to write to initialize this so inside here we pass in the element that we want to insert in this editor we can even drop on the next line tab it since it's promise based then we are going to write we are going to target the element that we want to initialize that editor in so document dot query selector oh sake it's a character selector and then we want to target the element with the id of editor so inside here let's put the single tags or double quotes then o then we target that id of editor even you can pass in document.getelementbyid but we're using the newer standards then we say judgement.queryselector and we want to select that then if in case there is an error we can catch it we say dot catch and then we pass in the error and we use this arrow functions you can pass in the function but right now we're on the newer standards then we shall use that so console.error since it will be an error you can see you can say that console.log or that error since it will be an error then we end it like that so if you have to refresh this page it should give us the text editor it's too big let us wrap this div inside the simple container tag container element let us get this div i want to apply some simple stylings so that doesn't be too too too big internal styling we are going to target that container and then we say wedith of 80 percent oh width of 80 percent and the maximum weight death will be 800 max radius be 800 pixels so these are simple stylings that i'm just applying and i want it to be centered so zero auto refresh the page and our editor should be somewhere in the middle right so this is this is how you configure ck editor 5 on your page specify the build which is a classic editor is the one we downloaded here if you saw so we selected it's the default selected build so when you're initializing it use this class classic editor.create method and then pass in the element that you want to target or insert in that editor then here you can catch the error if in case anything happened then as i said it's promise based you can add on the dot then when you want to append some new cool features or plugins here but for this case i just want to show you how to initialize this and it's what we have done then let me show you some simple ways of editing this you can highlight text and bold make it italic you can insert links https forward slash or stone code cipher dot com and click take and that one will be a link you can insert into bullets team so stuff like that if you want to go out of that loop just place again enter oh after that or is it misbehaving it has misbehaved this time but again you can add in even numbers number lists whoa do stuff like that then you can even insert in tables you can insert in table you can make this a table header by turning that into that if you put name age college so stuff like that that's how you easily insert into table if you want to make this side this column also some heading area just do that and this one will also be some editing area so it will be somehow bold this is how you can set in two tables if you're done and you want right here just click this arrow insert paragraph and they will give you space below that table very very simple so this is the secret editor for the bad thing about it you can view this source code of the file and if you remember in my previous tutorials this is what we are creating this is ck804 if you have to paste something here for rate if there is a section here of source you can click there and view the source code so if you want to modify inserting some custom html you can do that which is not possible with ck editor for and they also admit it that they will not have that future or if at all they change their mind they can put it back and you'll be able to see how it works now let us put some simple title here how to insert ck editor five in your website so this is what somebody asked me on youtube if you click yeah the article has been published successfully after some six seconds i'll be taken back to the homepage or the dashboard and this is what we have inserted so if you want these tutorials they are popping up right now in your cards and the links will be down below so this is ck editor 4. in case you want to see how it's done watch those tutorials but for this case this is what we are looking at ck editor 5 as i promised you i'm going to show you how to work with the balloon and the inline editor so let us start with the inline editor and for this case i'm going to be using the cdn i'm not going to download again the package i'm going to use cdn links copy that then let us go back to our editor and for inline it means inside this div that we gave the id of editor we can place in some text so if at all you have some text that you want users to edit on a fly you can use the inline editor and this house done this is the inline text and i'm going to first block this or comment out the script tag for the classic and then paste the cdn that i copped from the official page of ck editor and save that right now we won't see any change on the page and probably they should be throwing out some error of saying classic is not defined so classic edit is not defined just because the cdn that we are pulling in is for the inline editor so what you have to change is this method of classic editor then you change it to inline editor and then save and this error should go away and let us give it some time to load and by default when the user learns or lands on the page they won't be showing them the editor so they will have to first focus their cursor on that text and they will be able to add in some more text adding some stylings bold stuff like that i hope you now know how the inline editor works so that's the inline build then let us try the balloon select that and then copy the cdn link copy it and take it and paste it here so right now we are pulling in the baron build and if you have to go back again it will tell us the inline editor is not defined that's because the method that we are calling is not the right one as you can see we are just changing around this the first one was classic editor in line editor so they are the same methods what you're seeing here below is to always be the same as the first line you have to call it the specific build that you're pulling in from the ck editor so we are pulling in the balloon editor red balloon balloon editor and save so this is joined to this it's just that i want it to be neat so if you have to save this and go back in the page give it time to load so right now for the balloon editor if you focus into this you won't be able to see the toolbar oh yeah the toolbar popping up why cause for it to display the toolbar you need to be highlighting the text that you want to work on so let's say you want to work on this that's when this toolbar will appear so i want it bold then you can just press enter right team essay term highlight them make them lists and that will appear very very simple so that's how the balloon editor works i hope i gave you some basic understandings now we can use these different ck editor 5 builds if so consider subscribing to my channel like the video share it on different social medias and i will always see you in the next tutorials peace you

Channel: Oston Code Cypher

Views: 38,525

Keywords: How to, web development, code bootcamp, how to code, brand, top developer skill, how to, CKEditor Quick Start Guide, Learn how to install Ckeditor 5, Learn how to integrate Ckeditor 5, Learn how to configure Ckeditor 5, Learn how to develop CKEditor 5, CKEditor 5 documentation, .gg, hh

Id: Mz8HJjA5lZA

Length: 21min 5sec (1265 seconds)

Published: Sun Apr 18 2021