@oakjs/addon-ckeditor5-react NPM

@oakjs/addon-ckeditor5-react

An addon to use CKEditor5 as an oak field for the React renderer.

Installation

yarn add @oakjs/addon-ckeditor5-react @ckeditor/ckeditor5-react @oakjs/ckeditor5-build-custom

Usage

import { Builder, baseAddon } from '@oakjs/react';
import { ckeditorFieldAddon } from '@oakjs/addon-ckeditor5-react';

import '@oakjs/theme/dist/oak.min.css';
import '@oakjs/addon-ckeditor5/dist/oak-addon-ckeditor.min.css';

const myAddon = () => ({
  overrides: [{
    type: 'component',
    targets: ['title', 'text', 'button'],
    fields: [{
      key: 'content',
      type: 'ckeditor',
    }],
  }],
});

export default () => {
  const [content, setContent] = useState([]);

  return (
    <Builder
      addons={[baseAddon(), ckeditorFieldAddon(), myAddon()]}
      value={content}
      onChange={setContent}
    />
  );
};

Documentation

The ckeditorFieldAddon() addon adds a new field with the ckeditor type.

We can then either directly create component settings with the ckeditor field type:

import { BuilderField, baseAddon } from '@oakjs/react';
import { ckeditorFieldAddon } from '@oakjs/addon-ckeditor5-react';

const myAddon = () => ({
  settings: [{
    id: 'my-setting',
    type: 'ckeditor',
    key: 'property.subProperty',
  }],
});

export default () => (
  <BuilderField
    addons={[baseAddon(), ckeditorFieldAddon(), myAddon()]}
    value={content}
    onChange={setContent}
  />
);

Or override existing component settings:

import { Builder, baseAddon } from '@oakjs/react';
import { ckeditorFieldAddon } from '@oakjs/addon-ckeditor5-react';

const myAddon = () => ({
  overrides: [{
    type: 'component',
    targets: ['title', 'text', 'button'],
    fields: [{
      key: 'content',
      type: 'ckeditor',
    }],
  }],
});

export default () => (
  <Builder
    addons={[baseAddon(), ckeditorFieldAddon(), myAddon()]}
    value={content}
    onChange={setContent}
  />
);

Custom Editor

As the default ClassicEditor was a bit too narrow for our needs, we created our own custom editor based on the ClassicEditor and some additional plugins, available here. If you don't need this, or want to use a custom-built editor, pass it as a prop to the ckeditorFieldAddon() function:

import { Builder, baseAddon } from '@oakjs/react';
import { ckeditorFieldAddon } from '@oakjs/addon-ckeditor5-react';

import MyCustomEditor from './MyCustomEditor';

export default () => (
  <Builder
    addons={[baseAddon(), ckeditorFieldAddon({ editor: MyCustomEditor })]}
    value={content}
    onChange={setContent}
  />
);

Custom toolbars

The same goes for the toolbars:

import { Builder, baseAddon } from '@oakjs/react';
import { ckeditorFieldAddon } from '@oakjs/addon-ckeditor5-react';

export default () => (
  <Builder
    addons={[
      baseAddon(),
      ckeditorFieldAddon({
        config: {
          toolbar: ['heading', 'bold', 'italic'],
        },
      }),
    ]}
    value={content}
    onChange={setContent}
  />
);