0

I've followed the CKEditor 4 documentation on creating a basic plugin, but it doesn't seem to register in my react app. I've added the plugin file structure and added the plugin.js in node modules along with the icons. How do I pass it to config in ckeditor4-react?

import logo from './logo.svg';
import './App.css';
import CKEditor from 'ckeditor4-react';

function App() {

  return (
    <div className="App">
      <header className="App-header">
      <h2>Using CKEditor 4 in React</h2>
                <CKEditor
                    config={{
                      extraPlugins: "timestamp"
                    }}
                    data="<p>Hello from CKEditor 4!</p>"
                />

in plugin.js (node_modules/ckeditor4-react/plugins/timestamp/plugin.js

CKEDITOR.plugins.add( 'timestamp', {
    icons: 'timestamp',
    init: function( editor ) {
        editor.addCommand( 'insertTimestamp', {
            exec: function( editor ) {
                var now = new Date();
                editor.insertHtml( 'The current date and time is: <em>' + now.toString() + '</em>' );
            }
        });
        editor.ui.addButton( 'Timestamp', {
            label: 'Insert Timestamp',
            command: 'insertTimestamp',
            toolbar: 'insert'
        });
    }
});
P Kwong
  • 21
  • 1
  • 5

1 Answers1

-1

You can achieve loading a custom plugin in the below way.

import CKEditor from "ckeditor4-react";

function App() {
  return (
    <div className="App">
      <CKEditor
        data="<p>Hello from CKEditor 4!</p>"
        config={{
          toolbar: [["Bold"], ["Timestamp"]],
          extraPlugins: "timestamp",
        }}
        onBeforeLoad={(CKEDITOR) => {
          CKEDITOR.plugins.add("timestamp", {
            init: function (editor) {
              editor.addCommand("insertTimestamp", {
                exec: function (editor) {
                  var now = new Date();
                  editor.insertHtml(
                    "The current date and time is: <em>" +
                      now.toString() +
                      "</em>"
                  );
                },
              });
              editor.ui.addButton("Timestamp", {
                label: "Insert Timestamp",
                command: "insertTimestamp",
                toolbar: "insert",
                icon: "https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Clock.png",
              });
            },
          });
        }}
      />
    </div>
  );
}

export default App;

You can also pass a local icon (make sure the size of the icon is 24x24) to the plugin like -

import timestampIcon from "./timestampIcon.svg';

...

   editor.ui.addButton("Timestamp", {
         label: "Insert Timestamp",
         command: "insertTimestamp",
         toolbar: "insert",
         icon: timestampIcon
   });

...
Revanth Boyapally
  • 1
  • 1