Registry / web-framework / ckeditor5-extra-build

ckeditor5-extra-build

library1.0.33jsnpmunverified

This package provides a custom build of CKEditor 5, a modern, modular, and extensible rich-text editing framework written in TypeScript. Unlike the official, more minimal builds, `ckeditor5-extra-build` likely bundles a curated set of 'extra' plugins and features to provide a more comprehensive out-of-the-box experience. CKEditor 5 itself is actively developed by CKSource, with frequent releases (multiple minor and patch versions per month, major versions annually) and a strong emphasis on a plugin-based architecture, virtual DOM, and modern JavaScript practices. The framework supports real-time collaboration, advanced content conversion (e.g., Import/Export to Word/PDF), and is designed for deep integration into applications with native support for frameworks like React, Angular, and Vue.js. This specific build, however, is a community-contributed package, and its exact 'extra' features are determined by its maintainer. It currently ships as version 1.0.33.

web-framework

npm install ckeditor5-extra-build

package ↗homepage ↗

INSTALL

IMPORT

SIG · CKEDITOR5-EXTRA-BU

ckeditor5-extra-build

web-frameworkjavascriptv1.0.33

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.

Editor

✓ import Editor from 'ckeditor5-extra-build/build/ckeditor';

✗ import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic';

For custom builds, the main editor class is typically exported as default from the bundled `ckeditor.js` file. The exact name (`Editor` or `ClassicEditor`, etc.) might vary, requiring inspection of the `build/ckeditor.js` file if facing issues. Newer CKEditor 5 installation methods (since v46) encourage direct imports from the `@ckeditor/ckeditor5` package for core functionality instead of specific build packages.

EditorConfig

✓ import type { EditorConfig } from 'ckeditor5-extra-build';

✗ import { EditorConfig } from 'ckeditor5-extra-build/build/ckeditor';

For type imports, the type definitions are usually exposed at the package root if available. This build might not provide dedicated type exports for its configuration object if it's a simple JavaScript build without TypeScript source maps or declarations. In such cases, types might need to be manually declared or inferred.

ClassicEditor

✓ import ClassicEditor from 'ckeditor5-extra-build/build/ckeditor';

✗ const ClassicEditor = require('ckeditor5-extra-build/build/ckeditor');

CKEditor 5 builds are generally ESM-first or UMD bundles designed for modern environments. While `require()` might work in some CJS contexts for UMD bundles, native ESM `import` is the idiomatic and recommended way to load these builds. The actual class name might be `Editor` or `ClassicEditor` depending on the build configuration.

Initializes a CKEditor 5 Classic Editor instance on a specified DOM element with a rich toolbar and basic image/table configuration, demonstrating asynchronous creation.

import Editor from 'ckeditor5-extra-build/build/ckeditor'; import 'ckeditor5-extra-build/build/ckeditor.css'; // Don't forget to import the styles! document.addEventListener('DOMContentLoaded', () => { const editorElement = document.querySelector('#editor'); if (editorElement) { Editor.create(editorElement, { // Example configuration - adjust as needed toolbar: [ 'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', 'underline', 'strikethrough', 'code', 'subscript', 'superscript', '|', 'link', 'blockquote', 'uploadImage', 'insertTable', 'mediaEmbed', '|', 'bulletedList', 'numberedList', '|', 'outdent', 'indent', '|', 'alignment', 'fontColor', 'fontBackgroundColor', 'fontSize', 'fontFamily', '|', 'horizontalLine', 'removeFormat', 'sourceEditing' ], language: 'en', image: { toolbar: ['imageTextAlternative', '|', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'resizeImage'] }, table: { contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'] }, // Note: Some premium features (e.g., real-time collaboration, AI) require a licenseKey and CKEditor Cloud Services. // licenseKey: process.env.CKEDITOR_LICENSE_KEY ?? '', }) .then(editor => { console.log('CKEditor 5 with extra features was successfully initialized!', editor); // Access the editor instance, e.g., to get/set data: // editor.setData('<p>Hello <strong>CKEditor 5</strong>!</p>'); // console.log(editor.getData()); }) .catch(error => { console.error('There was a problem initializing the editor.', error); }); } else { console.error('Editor target element #editor not found.'); } }); // Add a simple HTML structure for the editor /* <div id="editor"> <p>This is the initial editor content.</p> </div> */

Debug

Known issues

breakingCKEditor 5 has undergone significant changes in its installation methods and module exports. Starting with v42.0.0 (June 2024), and fully transitioned by v48.0.0 (Q2 2026), official `@ckeditor/ckeditor5-build-*` packages are deprecated. Developers are encouraged to use new installation methods by importing directly from `ckeditor5` and `ckeditor5-premium-features` packages, or to create custom builds. This package, being an older community build, might not align with these latest methods and could become harder to update.

fix

For new projects or major upgrades, consider migrating to the official CKEditor 5 new installation methods by installing `ckeditor5` directly and manually configuring plugins, or by using the official CKEditor 5 Builder to generate a modern custom build. Review the official CKEditor 5 migration guides.

affects: >=1.0.0

breakingAs of CKEditor 5 v46.0.0, a unified export policy was introduced, standardizing public API elements and often renaming them. Direct imports from source files (e.g., `@ckeditor/ckeditor5-package/src/plugin`) are deprecated and will no longer work with new npm package versions, which will omit the `src` directory. This applies to both official and custom builds based on newer core versions.

fix

Always import public API symbols from the package's main entry point (`import { Symbol } from 'package-name';`). If using older custom builds, ensure your build process correctly bundles all necessary components or migrate to the new installation methods that provide full TypeScript support and standardized exports.

affects: >=1.0.0

gotchaCKEditor 5 requires its associated CSS styles to be imported separately. The JavaScript bundle from a build typically does not include the UI styles, leading to an unstyled or broken editor interface if the CSS is omitted. This is especially true for modern installation methods.

fix

Ensure you import the CSS file for your chosen build. For this package, it's typically `import 'ckeditor5-extra-build/build/ckeditor.css';` in your main JavaScript entry file or CSS bundle. For custom builds, ensure your build process outputs and you import the compiled CSS.

affects: >=1.0.0

breakingCKEditor 5 periodically introduces breaking changes in its configuration options, plugin APIs, and default behaviors (e.g., AI model defaults, iframe sandboxing, table alignment output, markdown processor). Upgrading CKEditor 5 dependencies, even for patch versions of builds, can sometimes introduce unexpected behavior or require configuration adjustments.

fix

Always consult the official CKEditor 5 changelog and update guides for specific versions when upgrading. Pay close attention to major and minor breaking changes, particularly in areas like AI, HTML support, and core editing features. Ensure all CKEditor 5 packages are updated to the same version to avoid compatibility issues.

affects: >=1.0.0

gotchaSome advanced or premium CKEditor 5 features (e.g., real-time collaboration, AI integration, advanced document import/export, CKBox/CKFinder integration) require a valid license key and often depend on CKEditor Cloud Services. Without these, the features will not function or may display errors.

fix

If using features that require Cloud Services, obtain a license key from CKEditor, ensure your Cloud Services environment is correctly configured, and pass the `licenseKey` to the editor configuration. For offline features, ensure all necessary plugins are correctly bundled and configured within your build.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'create')

The editor class was not correctly imported or bundled, or the script executed before the DOM was ready, or the `build/ckeditor.js` path is incorrect.

fix

Verify the import path `ckeditor5-extra-build/build/ckeditor` is correct. Ensure the JavaScript code runs after the DOM element for the editor (`#editor`) is available (e.g., inside `DOMContentLoaded`). Confirm that the build artifact `ckeditor.js` actually exports the editor class as default.

The current CKEditor 5 build requires the following elements and attributes: ... The following elements are missing:

This error often occurs when an HTML content filter (e.g., in a CMS like Drupal) is too restrictive and removes elements or attributes that the CKEditor 5 build expects or generates. It can also happen if the editor's schema configuration doesn't match the content being edited or pasted.

fix

Adjust your HTML content filter settings to allow all elements and attributes required by your CKEditor 5 configuration. Alternatively, customize your CKEditor 5 build's schema to align with the allowed HTML. Consult the CKEditor 5 documentation on content filtering and schema for detailed guidance.

CKEditorError: plugin-load:plugin-not-found

A plugin specified in the editor's configuration (`config.plugins` or `config.toolbar`) is not included in the loaded build. This is common in custom builds where not all plugins are bundled, or if using a base build and trying to configure a plugin not present.

fix

Ensure that any plugin you configure in the editor's `config` object is actually bundled within your `ckeditor5-extra-build` package. If not, you will need to either use a different build that includes the desired plugin or create your own custom CKEditor 5 build with the required plugins.

Editor is not defined

The CKEditor 5 script (e.g., `ckeditor.js`) failed to load or execute, making the global `Editor` or imported `Editor` symbol unavailable.

fix

Check your script tags or module imports to ensure the `ckeditor.js` file from `ckeditor5-extra-build` is correctly loaded. Inspect browser developer tools for network errors (404 for the script) or JavaScript parsing errors. If using a module bundler, confirm the bundle correctly includes the CKEditor build. Ensure the path is correct.

Upgrade

Version history

1.0.33latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

13 hits · last 30 days

node

Bingbot

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/ckeditor5-extra-build ↗

homepagehttps://ckeditor.com ↗