CkEditor In ReactJs - Interactive Editor In ReactJs

[Applause] [Music] hello everyone today we are going to discuss how to create ck editor in react i have uh already completed the basic template of react app i have created in this editor component in the components folder and already returned app.js used routes and put the editor at route slash i will not show you how all this is done because i am considering that you have the basic knowledge of how react works and i have used a function based component i will also show how class based component is used in ck editor react i have also started the react server npm when start and everything is running up and good so let's get started here in the app.js we have routes which we have used by react autodom react auto down version which i have used is 5.3 right because in the latest version we have to wrap all this in the routes and which is too much of a hassle for me so i'm not using the latest version but the previous one so let's start creating the editor component in which we will put our cigarette so before moving further i would like to show you something it's my website called note yard for those who are not willing to watch the video to the end and directly want the code here i have put the code in create seek editor in react blog here i have written properly how this video will proceed and how all the code is written you can directly copy and paste from here i will provide the website and this blog link in the description so step one to create this editor is to go on google and search online ck editor builder it's it's the service provided by the ck editor to download its files and directly implement them into your project when you open this on builder then you will see that in step one you can see many type of editor we will choose classic one here different types of editors are shown like classic inline balloon so if you like want to implement editor like medium website if you have visited uh medium.com then you will see that they have implemented balloon type editor so you can choose balloon on next step you will see all the plugins you can choose plugins of your choice i have already chosen the default ones in the next step you will have to choose the plugins which are available for your account like if you have premium account then you can choose all the premiums plugins also but here the default ones which i have chosen are all available so it's good to go in the next step choose your language in the next step you click start here and there building is started as you can see download the zip file of this editor will be downloaded now take this save file cut from the download folders and go to your project here in your project you have to paste this into the root folder root folder i mean is that the folder in which your node modules are present or your source folder is present here as you can see if you extract this folder then this will mean this format and your project is in this format so you have to put this extracted folder that zip file and then extract it into that folder as shown below here in the node modules in the root folder you have to put this the creator 5 zip or secret editor 5 extracted zip folder here in the text details which is my root folder i will put this here and let me rename this to seek editor five which is more convenient see create the five extract this folder series editor five here extract so let me see yes it's good now if i open this folder you can see build sample source in source which have main file and in build we have this project build like npm run build which we do in our project here we have already given this build in sample you will see a html file which we you can run and test how it's looking now to install this ck editor 5 folder or just build into our project we need to run a command called npm air file ck editor five which is the uh cigarette five with the folder name as shown here so within this command then this c greater five build will be added into our pic package.json wait for it wait for it um yes now the command has been completed let's move on to the blog which i was showing you first here in this blog as you can see i have written the code for class based component how cigarette is implementing the class or in function based component also so i will copy this code from here and directly paste this code into in the component editor component i will show you how this code is working just be with me for a second change the myc creator name to editor and also export default editor now let's move to code in c creator custom build build master editor in the second line if you click on that you will visit on the cigarette build which we extracted in our main folder from the zip file which we downloaded from the ck editor builder now i have imported it here as the editing class editor and installed have i installed or not i think i haven't so last installed npm install ck editor 5 react this is the node module package for creator 5 in react so let it install make eight way three okay it has been installed successfully right and compiled it successfully also so no yeah no error is showing up so let's explain this code a simple heading in the class name app and after that ck editor which i imported from the signature 5 react then attribute editor request to classic editor editor is the attribute in which you want to pass which editor we are implementing in in this we are implementing our customizer classic editor and data default data which will show up in the editor on ready on ready will be a when the editor is ready to work right in on change when something is changed in the editor this function will run if you focus out of the or click out of the editor then that and on focus when you click in the editor to type something then these functions will work okay so let's run this code and see if this is actually working or not uh i think the code is not working because the editor hasn't shown the errors cannot get property of undefined reading create not this again this is the typical error which i also faced recently when i implemented it again so let me get back to you in a moment a few moments later a few minutes later three days later so the error was that i imported it as editor as ck editor but i had to do is simply import result editor what i had done previously was i had written editor as ck id as classic editor sorry as classic editor this was the import at first but now i commented it out and edit commented out and what i have done is the importing the second line import editor from directly no as or something right this may be because this c guy editor doesn't support a function based component that well it is for class based component right so one import may work for you one may not if one doesn't work then use that commented out one here class based component i have written let me copy this and show you class based components also if i paste it and save it it will not show any error in class based components so here export default my c editor export default my secret compiled successfully as you can see it's working properly and if i control plus that control plus that and return back to the function based component and just show you that function based component is also working properly comment it out save refresh as you can see this is also working properly so the secret support uh class based component but not function based component that well so you can use any of the import from here okay if the second one works for you then well good if doesn't then third one will work for you because in my website in note yard where i have implemented these guides let me show you uh here as you can see in this segregated i have used the third import this one ck editor as classic editor it's working there but i don't know why it's not working here so second work is working here directly input editor if it doesn't work then use the third line import okay now when you implement this code or some third error occurs then comment in the section i will definitely help you and like this video if you liked it or subscribe my channel for more videos like this and i will see you next time bye [Music] [Applause] [Music] [Applause]

Channel: DEV_PIE

Views: 33,439

Keywords:

Id: cevL8_Rsmuc

Length: 11min 21sec (681 seconds)

Published: Tue Mar 29 2022