Custom CKEditor 5 Build

Custom CKEditor 5 Decoupled Document build with additional plugins and no watermark.

Included Plugins

| Plugin | Description | |---|---| | Mention | @ and # autocomplete for people and equipment | | Find and Replace | Search & replace in document | | Source Editing | Edit raw HTML/Markdown | | Word Count | Live word/character count | | Autosave | Auto-save to localStorage | | Autoformat | Markdown shortcuts | | Code Block | Insert code blocks | | Highlight | Text highlighting | | Select All | Ctrl+A support | | Style | Predefined text styles |

Build Commands

# Build once
npm run build

# Build in development mode (with source maps)
npm run dev

# Watch for changes and auto-rebuild
npm run watch

# Watch with verbose output
npm run watch:verbose

File Structure

ckeditor5-build/
├── src/
│   └── ckeditor.js          # Custom editor entry point (all plugins listed here)
├── dist/
│   ├── ckeditor.js           # Built editor bundle
│   └── styles.css            # Built editor styles
├── watch.js                  # File watcher for auto-rebuild
├── webpack.config.js         # Webpack build config
├── postcss.config.js         # PostCSS config
├── package.json              # Dependencies
└── README.md                 # This file

Adding a New Plugin

1. Add the dependency to package.json:

   "@ckeditor/ckeditor5-plugin-name": "^41.4.2"

2. Import and add it to src/ckeditor.js:

   import PluginName from '@ckeditor/ckeditor5-plugin-name/src/pluginname.js';
   
   class Editor extends DecoupledEditor {
     static builtinPlugins = [
       // ...existing plugins
       PluginName,
     ];
   }

3. Configure in defaultConfig if needed

4. Run npm run build or just save the file (auto-rebuild watcher handles it)

Auto-Rebuild

The watch.js script monitors:

• src/ckeditor.js — plugin changes
• package.json — dependency changes
• webpack.config.js — build config changes

When a change is detected, it automatically rebuilds the bundle after a 1-second debounce.

From the Root Project

# Build CKEditor from root
npm run build:ckeditor

# Watch CKEditor from root
npm run watch:ckeditor

# Run both CKEditor watcher + Vite dev server
npm run dev:all