{"id":15571,"library":"ckeditor5-custom-build","title":"CKEditor 5 Custom Online Build","description":"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.","status":"active","version":"0.0.6","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install ckeditor5-custom-build","lang":"bash","label":"npm"},{"cmd":"yarn add ckeditor5-custom-build","lang":"bash","label":"yarn"},{"cmd":"pnpm add ckeditor5-custom-build","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for `npm` and the build process (`npm install`, `npm run build`).","package":"node","optional":false},{"reason":"Package manager required for installing dependencies and running build scripts.","package":"npm","optional":false}],"imports":[{"note":"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.","wrong":"import { ClassicEditor } from 'ckeditor5-custom-build';","symbol":"ClassicEditor","correct":"\n"},{"note":"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.","wrong":"const Editor = require('ckeditor5-custom-build').Editor;","symbol":"Editor instance","correct":"import ClassicEditor from './build/ckeditor.js'; // Assuming a ClassicEditor build\n\nClassicEditor\n .create( document.querySelector( '#editor' ) )\n .then( editor => {\n // The editor instance itself, useful for advanced integrations.\n window.editor = editor;\n } )\n .catch( error => {\n console.error( 'Error initializing editor', error );\n } );"}],"quickstart":{"code":"\n\n\n \n \n CKEditor 5 Custom Build Quickstart\n \n \n\n\n

My Custom CKEditor 5 Instance

\n\n

This is the initial content of the editor.

\n\n \n \n\n\n","lang":"javascript","description":"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`."},"warnings":[{"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.","message":"This 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.","severity":"gotcha","affected_versions":">=0.0.1"},{"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.","message":"As 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.","severity":"breaking","affected_versions":"<41.0.0"},{"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()`.","message":"If 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.","severity":"gotcha","affected_versions":">=0.0.1"},{"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.","message":"The README explicitly warns about browser caching issues after rebuilding the editor. Changes to the build might not reflect immediately in the browser.","severity":"gotcha","affected_versions":">=0.0.1"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure that `` 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.","cause":"The CKEditor 5 build script (`ckeditor.js`) was not loaded, or was loaded incorrectly, before attempting to initialize the editor.","error":"ReferenceError: ClassicEditor is not defined"},{"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 `