Kevin Rich Text Editor

A customized build of CKEditor, a rich text editor.

Development

• Git repository

• npm package

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;