Registry / web-framework / ckeditor5-custom-build

ckeditor5-custom-build

JSON →
library0.0.6jsnpmunverified

This package (`ckeditor5-custom-build`) is a foundational repository generated by the CKEditor 5 Online Builder tool, providing a customizable starting point for a rich-text editor. It is not a directly consumable NPM library but rather the source code and build configuration for a tailored CKEditor 5 instance. As a custom build, its version (0.0.6) reflects its initial state as a template, with no regular release cadence for this specific package. Users are expected to modify, build, and integrate the output into their applications. Key differentiators include the ability to hand-pick features and plugins from the CKEditor 5 ecosystem and self-host the resulting editor, offering complete control over the bundle size and included functionalities, contrasting with pre-built distributions like `@ckeditor/ckeditor5-build-classic`. It's primarily intended for web applications that need a highly specific rich-text editing experience, allowing for granular control over toolbar items, plugin configurations, and overall editor behavior.

web-framework
npm install ckeditor5-custom-build
package ↗homepage ↗
INSTALL
IMPORT
SIG · CKEDITOR5-CUSTOM-B
C
ckeditor5-custom-build
web-frameworkjavascriptv0.0.6
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

ClassicEditor
✓ <script src="./build/ckeditor.js"></script> <script> ClassicEditor .create( document.querySelector( '#editor' ) ) .then( editor => { console.log( 'Editor was initialized', editor ); } ) .catch( error => { console.error( error.stack ); } ); </script>
✗ import { ClassicEditor } from 'ckeditor5-custom-build';
This package is the *source* for a custom build. The `ClassicEditor` (or other editor type) constructor is exposed as a global variable by the *generated* `build/ckeditor.js` file, which is typically loaded via a script tag in HTML. Direct `import` from `ckeditor5-custom-build` itself is not the intended usage.
Editor instance
✓ import ClassicEditor from './build/ckeditor.js'; // Assuming a ClassicEditor build ClassicEditor .create( document.querySelector( '#editor' ) ) .then( editor => { // The editor instance itself, useful for advanced integrations. window.editor = editor; } ) .catch( error => { console.error( 'Error initializing editor', error ); } );
✗ const Editor = require('ckeditor5-custom-build').Editor;
For module-based applications (e.g., React, Vue, Angular), the *bundled output* (`build/ckeditor.js`) can be imported directly as an ESM module, which then exposes the editor constructor as its default export. The CommonJS `require` pattern is not typically used for CKEditor 5 builds.

This quickstart demonstrates how to include and initialize a custom CKEditor 5 classic build in a basic HTML page. It assumes the project has been built via `npm run build`, creating `build/ckeditor.js` and `build/ckeditor.css`.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CKEditor 5 Custom Build Quickstart</title> <!-- The editor CSS can be bundled or linked directly --> <link rel="stylesheet" href="./build/ckeditor.css"> </head> <body> <h1>My Custom CKEditor 5 Instance</h1> <div id="editor"> <p>This is the initial content of the editor.</p> </div> <script src="./build/ckeditor.js"></script> <script> ClassicEditor .create( document.querySelector( '#editor' ), { // Optional: Your license key if using premium features // licenseKey: process.env.CKEDITOR_LICENSE_KEY ?? '', // Optional: Configuration for real-time collaboration // collaboration: { // channelId: 'my-document-id', // webSocketUrl: 'ws://localhost:3000', // uploadUrl: 'http://localhost:3000/upload' // } } ) .then( editor => { window.editor = editor; console.log( 'CKEditor 5 ClassicEditor was successfully initialized!', editor ); } ) .catch( error => { console.error( 'There was a problem initializing the editor.', error ); console.error( 'Error details:', error.message ); } ); </script> </body> </html>
Debug
Known issues
gotchaThis package is a *template* for a custom build, not a pre-built library. To use it, you must first run `npm install` and then `npm run build` to compile the editor bundle into the `build/` directory. Direct usage of `ckeditor5-custom-build` via `npm install ckeditor5-custom-build` does not provide a ready-to-use editor.
fix
After cloning or downloading the custom build, navigate to its directory and run `npm install && npm run build`. Then, integrate the generated files from the `build/` directory into your application.
affects: >=0.0.1
breakingAs of March 2025 (Q1 2025), predefined CKEditor 5 builds (like `ckeditor5-build-classic`) and the legacy Online Builder, which this package emanates from, were deprecated. New installation methods focus on direct npm packages (`@ckeditor/ckeditor5`) and browser builds. While existing custom builds still function, future updates or new custom builds are encouraged to use the updated builder and installation methods.
fix
For new projects or major upgrades, consider migrating to the latest CKEditor 5 installation methods that utilize `npm` packages directly (e.g., `@ckeditor/ckeditor5`) instead of relying on custom build repositories from the deprecated online builder.
affects: <41.0.0
gotchaIf your custom build includes premium CKEditor 5 features (e.g., real-time collaboration, export to PDF/Word, certain advanced plugins), you will need a valid license key or specific backend endpoints. Without them, premium features will not function, and you may encounter console warnings.
fix
Obtain the necessary license key or backend service endpoints from CKEditor.com and ensure they are correctly configured during editor initialization, typically via the `config` object passed to `ClassicEditor.create()`.
affects: >=0.0.1
gotchaThe README explicitly warns about browser caching issues after rebuilding the editor. Changes to the build might not reflect immediately in the browser.
fix
After running `npm run build`, perform a hard refresh in your browser (Ctrl + R or Cmd + R) or clear your browser's cache to ensure the latest editor bundle is loaded.
affects: >=0.0.1
gotchaThe FAQ mentions that the online builder (and thus builds generated from it) is 'Not yet' directly usable with common frameworks like React, Vue, or Angular, though integrations are planned. While technically possible to integrate, this means official, streamlined wrappers or direct component usage are not provided out-of-the-box by this custom build template itself.
fix
For framework integration, developers typically need to create their own wrappers or components that import the generated `build/ckeditor.js` bundle and initialize the editor manually within the framework's lifecycle. Official CKEditor 5 documentation provides guides for framework integration.
affects: >=0.0.1
Errors
Common errors & fixes
ReferenceError: ClassicEditor is not defined
The CKEditor 5 build script (`ckeditor.js`) was not loaded, or was loaded incorrectly, before attempting to initialize the editor.
fix
Ensure that `<script src="./build/ckeditor.js"></script>` is correctly placed in your HTML, preferably right before the script that calls `ClassicEditor.create()`, and that the path to `ckeditor.js` is correct. Verify `npm run build` ran successfully.
Module not found: Error: Can't resolve 'ckeditor5-custom-build'
Attempting to `import` or `require` the `ckeditor5-custom-build` package directly as a module, rather than using its generated output or the underlying CKEditor 5 source modules.
fix
This package is a *source* repository for a build. You should import the *generated output* from your `build/` directory (e.g., `import ClassicEditor from './path/to/build/ckeditor.js';`) or load it via a `<script>` tag.
License key is missing.
A premium CKEditor 5 feature is being used without a valid license key provided in the editor's configuration.
fix
Obtain a license key from CKEditor.com and pass it in the editor configuration: `ClassicEditor.create( element, { licenseKey: 'YOUR_LICENSE_KEY' } )`.
Error: The editor was initialized without the `config.collaboration.channelId`.
Real-time collaboration features are enabled in the build, but the required `channelId` (and potentially `webSocketUrl`) is missing from the editor's configuration.
fix
Provide the necessary collaboration configuration: `ClassicEditor.create( element, { collaboration: { channelId: 'my-document-id', webSocketUrl: 'ws://localhost:3000' } } )`.
Upgrade
Version history
0.0.6latest on npm
Audit
Dependencies
noderequiredRequired for `npm` and the build process (`npm install`, `npm run build`).
npmrequiredPackage manager required for installing dependencies and running build scripts.
Agent activity
9 hits · last 30 days
node
8
OpenAI (training)
1
Resources
packagehttps://www.npmjs.com/package/ckeditor5-custom-build ↗
homepagehttps://ckeditor.com/ckeditor-5/ ↗
ckeditor5-custom-build — npm install ckeditor5-custom-build · libregistry