2.0.0 • Published 3 years ago
@rasoul678/ckeditor5-custom-balloon-block v2.0.0
CKEditor 5 custom balloon block editor build
Quick start
First, install the build from npm:
npm install --save @rasoul678/ckeditor5-custom-balloon-block
And use it in your react app:
import { CKEditor } from "@ckeditor/ckeditor5-react";
import BalloonBlockEditor from "@rasoul678/ckeditor5-custom-balloon-block";
const TestView = () => {
const [data, setData] = useState("<p>Hello from CKEditor 5!</p>");
useEffect(() => {
console.log(data);
}, [data]);
return (
<div>
<h2>Using CKEditor 5 build in React</h2>
<CKEditor
editor={BalloonBlockEditor}
data={data}
onReady={(editor) => {
console.log("Editor is ready to use!", editor);
}}
onChange={(event, editor) => {
const data = editor.getData();
setData(data);
console.log({ event, editor, data });
}}
onBlur={(event, editor) => {
console.log("Blur.", editor);
}}
onFocus={(event, editor) => {
console.log("Focus.", editor);
}}
/>
</div>
);
};
export default TestView;
2.0.0
3 years ago