search

ckeditor / ckeditor5-react

Official CKEditor 5 React component.
https://ckeditor.com/ckeditor-5
Other
420 stars 100 forks source link

Issue with rendering the content style in React.js - Next.js #236

Open HumbleBee14 opened 3 years ago

HumbleBee14 commented 3 years ago

Hi Team,

Thanks a lot for this amazing Rich text editor but I'm facing issue with rendering the content created in CKEDITOR on the actual page after saving. I have a blogging website created using Next.js where I have integrated CKEditor to create blog. Everything works fine in the editor , every style works fine inside it (even if I am editing it again). But if I open that content in actual page (blog page), there it doesn't render and directly shows the style logs instead if being rendered.

Can you please guide me which step am I missing here which is preventing styles to show on the page.

Editor Component: (working totally fine without ay error. Just mentioning in case am I doing anything silly here)

`useEffect(() => { editorRef.current = { CKEditor: require('@ckeditor/ckeditor5-react').CKEditor, ClassicEditor: require('@ckeditor/ckeditor5-build-classic'), // Editor: require('ckeditor5-custom-build'), }; return (

{ console.log('Editor is Now ready to use!'); } onChange={(event, editor) => { const data = editor.getData(); // Text Box Area data props.Prop(data); // Returning Editor Body data to callback function to save in DB // console.log({ event, editor, data }); }} />
. . .

`

Snapshots: In Editor:

before

On Page: after after2

Nothing renders,

The Images that I uploaded (base64) are directly shows in base64 code, not rendered as images. Similarly for everything this is the case.

Also: There were some old blogs that I had created using React-Quill which were fine, but as I just opened them in CKEditor now, even without editing them , just saving them again with CKEditor made those loose their styles and they too are now showing as un-rendered direct text.

Please help what possibly could I am doing wrong. I have spend around 5 days just to integrate CKEditor in my website and now I'm facing this issue :(

Thanks

PS: I tried this step also by adding this style sheet and the class as mentioned, that too didn't help. https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html#sharing-content-styles-between-frontend-and-backend

HumbleBee14 commented 3 years ago

I noticed that majority of the issues are coming up only in case of online made custom builds only !! Not in the pre-existing builds.

Can you please share what things are not available in online custom builds that are present in other builds that's causing this issue?

As per my experience until now with CKEditor, it's really too difficult to set it up as per our needs, as compared all other Editors where mostly it's more like plug and play, but here despite having tried for more than a week, I ended up with this situation sadly. I feel there's a clear lack of proper documentation for React and frankly speaking lack of clear examples. Please provide some more clear working examples in the documentation itself, that'd be really helpful.