Как добавить собственный плагин в ckeditor4-react?

Question

Я следил за документацией CKEditor 4 по созданию базового плагина, но, похоже, он не регистрируется в моем приложении для реагирования. Я добавил файловую структуру плагина и добавил plugin.js в модули узлов вместе со значками. Как передать его в конфиг в 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>"
                />

в 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'
        });
    }
});

Answer 1

Вы можете загрузить собственный плагин следующим образом.

      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;

Вы также можете передать локальный значок (убедитесь, что размер значка 24x24) в плагин, например:

      import timestampIcon from "./timestampIcon.svg';

...

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

...