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 -
Discussion (8)
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.
how about to upload image? can you update this tutorial how to upload image? thanks