I am creating a fresh CRA & here is my project directory
Before we going started, you need to add this npm package first, to install please paste the below code into your terminal.
npm i @ckeditor/ckeditor5-react
npm i @ckeditor/ckeditor5-build-classic
create a components folder under src folder and create a Editor component under components/Editor.js & use this code
import React, { useEffect, useRef } from "react";
function Editor({ onChange, editorLoaded, name, value }) {
const editorRef = useRef();
const { CKEditor, ClassicEditor } = editorRef.current || {};
useEffect(() => {
editorRef.current = {
CKEditor: require("@ckeditor/ckeditor5-react").CKEditor, // v3+
ClassicEditor: require("@ckeditor/ckeditor5-build-classic")
};
}, []);
return (
<div>
{editorLoaded ? (
<CKEditor
type=""
name={name}
editor={ClassicEditor}
data={value}
onChange={(event, editor) => {
const data = editor.getData();
// console.log({ event, editor, data })
onChange(data);
}}
/>
) : (
<div>Editor loading</div>
)}
</div>
);
}
export default Editor;
Now go to your app.js or wherever you want to use this editor just import Editor Component and use this
import React, { useState, useEffect } from "react";
import "./styles.css";
import Editor from "./Editor";
export default function App() {
const [editorLoaded, setEditorLoaded] = useState(false);
const [data, setData] = useState("");
useEffect(() => {
setEditorLoaded(true);
}, []);
return (
<div className="App">
<h1>ckEditor 5</h1>
<Editor
name="description"
onChange={(data) => {
setData(data);
}}
editorLoaded={editorLoaded}
/>
{JSON.stringify(data)}
</div>
);
}
visit ckEditor5 documentation to add more features - https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html
you can clone repo
apuchakraborty / ckEditor5-implement
Created with CodeSandbox
ckEditor5-implement
Created with CodeSandbox
go to - cd /projectdir
npm install & npm start to run
You can use this code in codesSandbox
Here is your editor -
Top comments (17)
Your codesandbox has same problem as my application. When you make a change in the code, and reload error:
CKEditorError
ckeditor-duplicated-modules
Read more: ckeditor.com/docs/ckeditor5/latest...
▶ 13 stack frames were collapsed.
eval
/src/Editor.js:10:21
7 | useEffect(() => {
8 | editorRef.current = {
9 | CKEditor: require("@ckeditor/ckeditor5-react").CKEditor, // v3+
Any idea how to solve this?
codesandbox.io/s/bitter-morning-m2...
thanks for reply. can you provide explanation with link?
Thanks for this !
Quite welcome! Best of luck in your journeys and have a great weekend!
Thanks! This really helps.
how can we add "Normal" in heading of toolbar along with paragraph? Can you make a post on that, it will help alot.
sir how can I upload image
Did you find any solution?
not yet sir:(((
Bro, I'm trying to find a Rich Text Editor for one of my projects, Non of them are working as expected, but you can go with TipTap
can I upload image with this bro ?
Yes, but only from the URL and not from your device! :(
finally I did it bro. try to use ckeditor by using online builder method. When you choose your plugins remember to choose base64 adapter this can help you to upload image from your computer. I have tried and success. Good luck to you bro. Note that base64 is the way you can upload image without any server-side configuration and no additional pluggin need to be installed when you use online-builder
Are you using this with Reactjs or Nextjs or any other tech? if you are using it with react or next can you plz send me a GitHub link for some reference?
Yes of course bro you can access my blog here for more detail. Also I'm using it with ReactJS. If you have any problem just comment in my blog and I will help you and like if this post is useful <3
dev.to/trinhcamminh/using-ckeditor...
Really helpful, i finally got to fix the errors that i was having