CKEditor 5 editor generated with the online builder

This repository contains a CKEditor 5 build produced with the Online builder tool and adds custom plugins (Fullscreen, Format Painter).

Quick start

Install dependencies

yarn

Develop with live rebuild (recommended)

yarn dev

Then open http://localhost:8080/sample/index.html

Production build

yarn build

Publish to npm

npm login
npm publish

Adding or removing plugins

Follow the official guide: Adding a plugin to an editor.

Custom plugins

Format Painter

Editor configuration (EditorConfig.formatPainter):

| Option | Type | Default | Description | |--------|------|---------|-------------| | clearOnBlur | boolean | false | When true, resets on editable blur. | | applyTrigger | 'mouseup' \| 'selectionChange' \| 'manual' | 'mouseup' | When active, which event auto-triggers apply (or never, for manual). | | mode | 'first' \| 'common' \| 'union' | 'first' | How to compute copied attributes from multi-node selections. | | include | readonly string[] \| 'all' | 'all' | Allowlist of attribute names to copy/apply. | | exclude | readonly string[] | [] | Denylist of attribute names to copy/apply. |

UI behavior:

• Single click = single-use (copies formatting, auto-resets after the next apply).
• Double click = persistent (stays active until you click again to reset).

Command: editor.execute('formatPainter', { action, persistent? }) (also supports legacy { type })

| action | Behavior | |----------|----------| | 'copy' | Copies formatting from the current non-collapsed selection (when enabled). | | 'apply' | Applies copied formatting to the current selection (auto-resets unless the last copy used persistent: true). | | 'reset' | Clears the format-painter state. |

Integrations can use editor.commands.get('formatPainter') for isEnabled, value (active), etc.

TypeScript imports from this package:

import DecoupledEditor, {
  FORMAT_PAINTER,
  type FormatPainterConfig,
} from "ckeditor5-customized";

Example (all parameters):

DecoupledEditor.create(element, {
  formatPainter: {
    clearOnBlur: false,
    applyTrigger: "mouseup",
    mode: "first",
    include: "all",
    exclude: ["linkHref"],
  },
});

Fullscreen

Editor configuration (EditorConfig.fullscreen):

| Option | Type | Default | Description | |--------|------|---------|-------------| | inPlace | boolean | false | If true, the fullscreen layer stays under the editor’s original parent (useful for focus traps, e.g. inside Ant Design Modal). If false, the editable host is moved to appendTo (default document.body) for full-viewport coverage. | | appendTo | HTMLElement | document.body when inPlace is not true | Mount node for the fullscreen root. | | zIndex | string | '10050' | CSS z-index of the fullscreen layer. | | showBackdrop | boolean | true | Whether to show the dimmed backdrop behind the editor. |

Keyboard: Esc exits fullscreen when active.

Main plugin API (editor.plugins.get('Fullscreen')):

• isFullscreen (getter)
• onFullscreenChange((isFullscreen: boolean) => void | null)
• toggle(callback) — deprecated alias for onFullscreenChange

Command / toolbar:

• Toolbar item and command name: 'fullscreen' (exported as FULLSCREEN_COMMAND).
• editor.execute('fullscreen') toggles fullscreen.

Examples:

// Default: mount on document.body, cover the whole viewport.
DecoupledEditor.create(element, {
  fullscreen: {},
});

// Stay in the original DOM subtree (e.g. modal + focus trap).
DecoupledEditor.create(element, {
  fullscreen: { inPlace: true },
});

// Custom mount + z-index.
DecoupledEditor.create(element, {
  fullscreen: {
    appendTo: document.getElementById("my-portal"),
    zIndex: "20000",
    showBackdrop: false,
  },
});

const fs = editor.plugins.get("Fullscreen");
fs.onFullscreenChange((on) => {
  console.log("fullscreen:", on);
});

TypeScript imports from this package:

import DecoupledEditor, {
  FULLSCREEN_COMMAND,
  type FullscreenConfig,
} from "ckeditor5-customized";

How to use as an npm package

npm install bv-ckeditor5 -S

or

yarn add bv-ckeditor5

HTML (Decoupled editor):

<div>
  <div id="toolbar"></div>
  <div id="editor"></div>
</div>

JavaScript:

import DecoupledEditor from "bv-ckeditor5";

const editorContainer = document.getElementById("editor");

DecoupledEditor.create(editorContainer, {}).then((editor) => {
  const toolbarContainer = document.getElementById("toolbar");
  toolbarContainer.appendChild(editor.ui.view.toolbar.element);
  editor.setData("<p>Hello</p>");
});

The default build includes formatPainter and fullscreen toolbar items. If you need a different toolbar setup, configure your build accordingly.