{"id":12961,"library":"ckeditor5-extra-build","title":"CKEditor 5 Extra Features Build","description":"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.","status":"maintenance","version":"1.0.33","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install ckeditor5-extra-build","lang":"bash","label":"npm"},{"cmd":"yarn add ckeditor5-extra-build","lang":"bash","label":"yarn"},{"cmd":"pnpm add ckeditor5-extra-build","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic';","symbol":"Editor","correct":"import Editor from 'ckeditor5-extra-build/build/ckeditor';"},{"note":"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.","wrong":"import { EditorConfig } from 'ckeditor5-extra-build/build/ckeditor';","symbol":"EditorConfig","correct":"import type { EditorConfig } from 'ckeditor5-extra-build';"},{"note":"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.","wrong":"const ClassicEditor = require('ckeditor5-extra-build/build/ckeditor');","symbol":"ClassicEditor","correct":"import ClassicEditor from 'ckeditor5-extra-build/build/ckeditor';"}],"quickstart":{"code":"import Editor from 'ckeditor5-extra-build/build/ckeditor';\nimport 'ckeditor5-extra-build/build/ckeditor.css'; // Don't forget to import the styles!\n\ndocument.addEventListener('DOMContentLoaded', () => {\n  const editorElement = document.querySelector('#editor');\n\n  if (editorElement) {\n    Editor.create(editorElement, {\n      // Example configuration - adjust as needed\n      toolbar: [\n        'undo', 'redo', '|', 'heading', '|', 'bold', 'italic', 'underline', 'strikethrough', 'code', 'subscript', 'superscript',\n        '|', 'link', 'blockquote', 'uploadImage', 'insertTable', 'mediaEmbed', '|', 'bulletedList', 'numberedList',\n        '|', 'outdent', 'indent', '|', 'alignment', 'fontColor', 'fontBackgroundColor', 'fontSize', 'fontFamily',\n        '|', 'horizontalLine', 'removeFormat', 'sourceEditing'\n      ],\n      language: 'en',\n      image: {\n        toolbar: ['imageTextAlternative', '|', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', '|', 'resizeImage']\n      },\n      table: {\n        contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']\n      },\n      // Note: Some premium features (e.g., real-time collaboration, AI) require a licenseKey and CKEditor Cloud Services.\n      // licenseKey: process.env.CKEDITOR_LICENSE_KEY ?? '',\n    })\n    .then(editor => {\n      console.log('CKEditor 5 with extra features was successfully initialized!', editor);\n      // Access the editor instance, e.g., to get/set data:\n      // editor.setData('<p>Hello <strong>CKEditor 5</strong>!</p>');\n      // console.log(editor.getData());\n    })\n    .catch(error => {\n      console.error('There was a problem initializing the editor.', error);\n    });\n  } else {\n    console.error('Editor target element #editor not found.');\n  }\n});\n\n// Add a simple HTML structure for the editor\n/*\n<div id=\"editor\">\n  <p>This is the initial editor content.</p>\n</div>\n*/","lang":"typescript","description":"Initializes a CKEditor 5 Classic Editor instance on a specified DOM element with a rich toolbar and basic image/table configuration, demonstrating asynchronous creation."},"warnings":[{"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.","message":"CKEditor 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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"As 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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"CKEditor 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"CKEditor 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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"Some 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'create')"},{"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.","cause":"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.","error":"The current CKEditor 5 build requires the following elements and attributes: ... The following elements are missing:"},{"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.","cause":"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.","error":"CKEditorError: plugin-load:plugin-not-found"},{"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.","cause":"The CKEditor 5 script (e.g., `ckeditor.js`) failed to load or execute, making the global `Editor` or imported `Editor` symbol unavailable.","error":"Editor is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}