Kevin Rich Text Editor
A customized build of CKEditor, a rich text editor.
Development
Quick start
First, install the build from npm:
npm i @kevin-oisp/kevin-ckeditor
If you use in React app, install this package:
npm install --save @ckeditor/ckeditor5-react
And use it in your website:
<div id="editor">
<p>This is the editor content.</p>
</div>
<script src="./node_modules/@kevin-oisp/kevin-ckeditor/build/index.js"></script>
<script>
ClassicEditor.create(document.querySelector("#editor"))
.then((editor) => {
window.editor = editor;
})
.catch((error) => {
console.error("There was a problem initializing the editor.", error);
});
</script>
Or in your JavaScript application:
import ClassicEditor from "@kevin-oisp/kevin-ckeditor";
ClassicEditor.create(document.querySelector("#editor"))
.then((editor) => {
window.editor = editor;
})
.catch((error) => {
console.error("There was a problem initializing the editor.", error);
});
import React from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@kevin-oisp/kevin-ckeditor";
function App() {
return (
<div className="App">
<header className="App-header">
<CKEditor
editor={ClassicEditor}
data="<p>Hello from CKEditor 5!</p>"
onReady={(editor) => {
// You can store the "editor" and use when it is needed.
console.log("Editor is ready to use!", editor);
}}
onChange={(event, editor) => {
const data = editor.getData();
console.log({ event, editor, data });
}}
onBlur={(event, editor) => {
console.log("Blur.", editor);
}}
onFocus={(event, editor) => {
console.log("Focus.", editor);
}}
/>
</header>
</div>
);
}
export default App;