How to Implement / Add / Build CKEditor 5 with React.js Hook (useState)?

This tutorial will show us, How to Implement / Add / Build CKEditor 5 with React.js Hook (useState)?

[@MohamadMeerasa]

Bro the response from the ckeditor will be html code and if we again retrieve that data means that html code only came how can we get that equivalent text of the html code??

[@frmngm]

better CKEditor or Tinymce for open source use?

[@ruggeddog3103]

great tut can you make a video where you're getting all the values and storing it into a database please?

[@khandoor7228]

Excellent Ajay! i use CKEditor with React so i love this!!

[@ajayjagtap9112]

Thank You.

[@jhonata328]

Hi Ajay, thanks for share this knowledge. i have one doubt, i need post that data in my API and send to the database for later push the data in the frontend, but i dont now what kind of model i need to grab that data.
if I understood correctly the data generated is like a string correct?

[@educuanticocuantico3033]

Gracias por su ayuda, muy buen video..

[@rtsky4344]

is there image uploading in sucessful?

[@tomlester8681]

Do you know if there is a way to render a custom element on output? I.e. If I want to create a custom react Element that renders my images, can I make CKEdit render say, "" instead of ?

[@shinchan4060]

When we refresh the page still the data exist? Did you save the data?

[@edu-correia]

Amazing video, helped me a lot!

[@ajayjagtap9112]

Thank you.

[@bassam.2023]

This was useful. Thanks.

[@JahangirKhan-hz7ui]

This is a great tutorial but if you could make a tutorial that how to save ckeditor data in json formate.. you can earn more views with this tutorial as well.

[@ajayjagtap9112]

Ok. Good suggestion. Will try that.

[@manimegalaiv8033]

Can you please explain how to add extra plugin to creditor in react?

[@ajayjagtap9112]

Hello Manimegalai, yes sure. I will do that in next tutorial. Thank you.

[@emreeren1752]

@@ajayjagtap9112 Hello! Did you do the tutorial? I can't find it.. Thanks..

[@lochawala]

Hi Ajay
Thanks for the great tutorial
can you please explain how to add an image resizer to it?

[@peshutanpavri1599]

This doesn't work with functional components in React?

[@raivikas200]

it was great and very helpful

[@DhiaMagicien]

Great tutorial , Thank you

[@mohdnawazishalam3255]

Please explain how to add image as well ??

[@ajayjagtap9112]

Hello, drag and drop image.

[@shreyasbharitkar9858]

@@ajayjagtap9112 Your insta I'd please

[@ajayjagtap9112]

@@shreyasbharitkar9858 sorry. I don't have account.

[@shreyasbharitkar9858]

@@ajayjagtap9112 ok...just tell me can we replace word when user enter it in ckeditor....i have added one custom button for that but it is not working

[@ajayjagtap9112]

@@shreyasbharitkar9858 I am not sure about this. First we need to check if CKEditor allow us to do this.? If yes then we can do this with JS.

[@webdev4738]

Hello Ajay,
Great !!! could you please also make one video regarding how we can add Mentions (@) in CKEditor, it will be very helpful.
Thanks

[@ajayjagtap9112]

Yes. Sure Thank you.

[@rajneeshmishra3850]

Hi Ajay,
Great explanation. I also want to use this in my project.
Is it open source? Also, it will be helpful if you show, how to use math equations with CKEditor.

[@ajayjagtap9112]

Yes, sure. It is open source.

[@rajneeshmishra3850]

@@ajayjagtap9112 thanks Ajay

[@poojabhandari631]

please provide for image upload using ckfinder

[@ajayjagtap9112]

Sure. Thank you

[@nguyenvanthien8968]

Thank bro!!!

[@sanalms1601]

thanks bro

[@SunilShaukat-h4o]

import React, { useState } from 'react'
import { CKEditor } from '@ckeditor/ckeditor5-react'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
const Editor = () => {
const [addData, setAddData] = useState("")
const [addedData, setAddedData] = useState(0)
const handleChange = (e, editor) => {
const data = editor.getdata();
setAddData(data);
}
return (

setAddedData(!addedData)}>{addedData ? "Hide Data" : "Show Data"}


{addedData ? addData : ""}


)
}
export default Editor

[@shamshunshams6239]

can you send code