DEV Community

Setting up a basic rich text editor in React

Sharon Gomez on September 17, 2020

As mentioned in my previous post, I've been working on a blogging app. I started writing up some posts of my own to document the experience, but qu...
Collapse
 
johnniepop profile image
Ivan Popov • Edited

Nice intro to CKEdit 5 for React.
I have a question though. Let's say I have an instance of this rich text editor on a page and a user tries to paste a large chunk of text (+5K lines for instance). The browser starts sweating. Well in about a minute or two it eventually pastes the text in a pretty huge, extended field. So my question is how would you prevent such situation?
One strategy would be to act early, catch the pasting event and restrict the length of the inserted text at that point. The CKEditor 5 API seem to have Clipboard and Clipboardobserver classes with the latter having a clipboardInput event but they don't seem to be easily accessible by React ... at least for me, since I'm still a noob in the front-end field.

Collapse
 
johnniepop profile image
Ivan Popov

At the moment I'm not sure if asked a too stupid question, or this feat is really difficult ...

Collapse
 
crimsonmed profile image
Médéric Burlet

The idea is indeed to restrict the length. Have you tried working with CKEdit plugins?
ckeditor.com/old/forums/CKEditor-3...

This looks promising for limiting the number of characters.

CKEdit clipboard is an extension that you also have to install:
ckeditor.com/docs/ckeditor5/latest...

You could also check this:
stackoverflow.com/questions/497090...

They look at pasting the clipboard content as text. This would remove any formatting that needs to happen and might lighten the load a lot.

Thread Thread
 
johnniepop profile image
Ivan Popov

Hi Médéric,
Thanks for your time.

I've seen some of the resources you provided. The point is that all of those, and the other working solutions I've found are vanilla javascript, and I can't figure how to reuse them in my react component. I mean, I already have the length altering function but I can't figure out with what prop to access it.

As for the plugin, yes it was one of the first things I tried but weirdly, after a seemingly successful installation, my project stops compiling (the '@@ckeditor/ckeditor5-clipboard' package is seen from the editor but not from the compiler).

Here (github.com/ckeditor/ckeditor5-reac...) I found a piece of useful example code but still not sure how to link it to the CKEditor component. I might ask a question directly in the project.

Cheers!

Thread Thread
 
johnniepop profile image
Ivan Popov
Thread Thread
 
johnniepop profile image
Ivan Popov • Edited

So a CKEditor dev gave some useful hints and I managed to fix my problem. I posted my solution also on stackoverflow: stackoverflow.com/questions/652636...

Collapse
 
dxniel profile image
Don Daniel

Hello, I was really happy when I found this post. It really helped in the development of my current website. But there's an error I encountered and it was because the CKEditor element being imported from '@ckeditor/ckeditor5-react' wasn't destructured. I don't know if this is a recent development on the creator's side, but the bug was fixed after I destructured it. Please adjust the post for the sake of future readers. Thank you.

Collapse
 
meenachinmay profile image
Chinmay Anand

Good work, yo!!!
why don't you think for a "work together" thing if you want. i am also learning react js and posting content on this platform. i will follow you on twitter and will say Hi.

Collapse
 
sharong profile image
Sharon Gomez

thanks 😊 and sure, followed you!

Collapse
 
meenachinmay profile image
Chinmay Anand

Yes, texted you already in private twitter messages. waiting for reply.
🎉👏
and yeah thank you for following.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
andrewbaisden profile image
Andrew Baisden

This looks so cool.

Collapse
 
sharong profile image
Sharon Gomez

thanks 🙂

Collapse
 
hackhubs profile image
Abhav Thakur

Nice work

Collapse
 
sharong profile image
Sharon Gomez

thanks!

Collapse
 
leibnizwang profile image
Rahan Bouess

thank for this wonderful post

Collapse
 
lester016 profile image
Lester016

Have u tried implementing a hovering toolbar?

Collapse
 
sharong profile image
Sharon Gomez

i haven't personally , but ckeditor offers a couple of 'balloon' builds that i think can be set up similarly!

Collapse
 
sorooshmortazavi profile image
Soroosh Mortazavi

thank you Sharon.
is there any way to use this text editor for RTL languages?