Registry / crm-productivity / ckeditor5-build-strapi-wysiwyg

ckeditor5-build-strapi-wysiwyg

library2.1.1jsnpmunverified

ckeditor5-build-strapi-wysiwyg provides an enhanced, pre-configured CKEditor 5 build specifically designed to replace the default WYSIWYG editor within Strapi applications. This package currently ships at version 2.1.1 and receives updates tied both to new features introduced by its maintainers (e.g., Source HTML editing, fullscreen mode, improved Strapi Media Library integration) and significant updates to the core CKEditor 5 library. Its key differentiators include direct integration with the Strapi Media Library for image uploads and access, a more extensive feature set compared to the standard CKEditor 5 Classic build, and a custom build tailored for the Strapi ecosystem, often used in conjunction with `strapi-plugin-ckeditor5`. Development activity is consistent, with releases occurring every few months to incorporate new CKEditor 5 versions and bug fixes.

crm-productivity web-framework communication

npm install ckeditor5-build-strapi-wysiwyg

github ↗package ↗

INSTALL

IMPORT

SIG · CKEDITOR5-BUILD-ST

ckeditor5-build-strapi-wysiwyg

crm-productivityjavascriptv2.1.1

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.

StrapiWysiwygEditor

✓ import StrapiWysiwygEditor from 'ckeditor5-build-strapi-wysiwyg';

✗ const StrapiWysiwygEditor = require('ckeditor5-build-strapi-wysiwyg');

The build primarily exports its configured Editor class as a default export. While CommonJS `require` might work in some transpiled environments, native ESM `import` is the recommended and cleaner approach.

EditorConfig

✓ import StrapiWysiwygEditor from 'ckeditor5-build-strapi-wysiwyg'; StrapiWysiwygEditor.create( /* ... */, { /* configuration */ });

Configuration is passed as a second argument to the `create` method. Consult CKEditor 5 documentation for available options like `toolbar`, `mediaEmbed`, etc.

HTML Element

✓ import StrapiWysiwygEditor from 'ckeditor5-build-strapi-wysiwyg'; const editorElement = document.querySelector('#editor'); StrapiWysiwygEditor.create( editorElement )

The editor requires a DOM element (e.g., a `<div>` or `<textarea>`) to mount itself. It typically replaces the element it's mounted on.

This quickstart demonstrates how to import and initialize the Strapi WYSIWYG editor build on a DOM element, including a sample toolbar configuration and initial content setting.

import StrapiWysiwygEditor from 'ckeditor5-build-strapi-wysiwyg'; document.addEventListener('DOMContentLoaded', () => { const editorContainer = document.getElementById('editor'); if (editorContainer) { StrapiWysiwygEditor.create(editorContainer, { // Basic configuration example, adjust as needed toolbar: { items: [ 'sourceEditing', '|', 'heading', '|', 'bold', 'italic', 'strikethrough', 'underline', 'highlight', '|', 'link', 'uploadImage', 'mediaLib', 'blockQuote', 'codeBlock', '|', 'numberedList', 'bulletedList', 'todoList', '|', 'indent', 'outdent', '|', 'alignment', '|', 'fontColor', 'fontBackgroundColor', 'fontSize', 'fontFamily', '|', 'horizontalLine', 'removeFormat', 'specialCharacters', 'superscript', 'subscript', '|', 'undo', 'redo', 'fullscreen' ] }, image: { toolbar: [ 'imageTextAlternative', 'toggleImageCaption', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side' ] }, mediaEmbed: { removeProviders: ['youtube', 'vimeo', 'dailymotion'] // Example: remove some default providers } }) .then(editor => { console.log('CKEditor 5 for Strapi initialized', editor); editor.setData('<p>Hello from <strong>CKEditor 5</strong> for Strapi!</p>'); }) .catch(error => { console.error('Error initializing CKEditor 5:', error); }); } }); // Minimal HTML structure for the editor /* <div id="editor"> <p>This is the default content.</p> </div> */

Debug

Known issues

breakingVersions prior to v2.x of this build are designed for Strapi v3 and are explicitly marked as deprecated and no longer maintained. Using them with Strapi v4 or newer is highly discouraged and will lead to compatibility issues.

fix

Upgrade to `ckeditor5-build-strapi-wysiwyg` v2.x or newer and ensure your Strapi application is also upgraded to Strapi v4 or later.

affects: <2.0.0

gotchaThis package is a CKEditor 5 *build*. While it contains all necessary plugins, direct customization of the build by adding or removing core CKEditor plugins requires re-building the package from source, which adds complexity to your project setup.

fix

For minor configuration changes (e.g., toolbar items), pass options to the `create` method. For significant structural changes to the editor's features, consider forking the repository or building your own CKEditor 5 from scratch.

affects: >=1.0.0

gotchaThe integration of this build into a Strapi project is typically handled via the `strapi-plugin-ckeditor5` package. Attempting to integrate this build directly into Strapi's admin panel without the companion plugin can be complex and may not benefit from full Strapi Media Library integration or other plugin-specific features.

fix

It is highly recommended to use the official `strapi-plugin-ckeditor5` package for integrating this build into your Strapi application, as it handles the necessary setup and wiring for optimal functionality.

affects: >=1.0.0

Errors

Common errors & fixes

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

The CKEditor 5 build class was not correctly imported or is not available in the global scope.

fix

Ensure you are using `import StrapiWysiwygEditor from 'ckeditor5-build-strapi-wysiwyg';` at the top of your JavaScript file and that your build process correctly handles ES Modules.

CKEditor doesn't appear or initialize on the page.

The target DOM element for the editor was not found or was unavailable when `create()` was called.

fix

Verify that the HTML element (e.g., `<div id="editor"></div>`) exists in your document and that `StrapiWysiwygEditor.create()` is called after the DOM is fully loaded (e.g., inside `DOMContentLoaded` event listener).

Images are not uploading to the Strapi Media Library or the 'MediaLib' button does not work.

The `ckeditor5-strapi-upload-plugin` may not be correctly configured, or the Strapi API endpoint for uploads is inaccessible or incorrect within the editor's context.

fix

If using the `strapi-plugin-ckeditor5`, ensure it's correctly installed and configured in your Strapi project. If integrating manually, verify that the upload adapter configuration for CKEditor 5 is correctly pointing to your Strapi upload endpoint and that necessary authentication is handled.

Upgrade

Version history

2.1.1latest on npm

Audit

Dependencies

strapi-plugin-ckeditor5requiredThis build is primarily designed to be consumed by the `strapi-plugin-ckeditor5` plugin for seamless integration into Strapi. Direct manual integration is possible but less straightforward.

ckeditor5-strapi-upload-pluginrequiredProvides automatic image uploads to the Strapi Media Library, a core feature of this build. This plugin is integrated into the build itself.

Agent activity

42 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Roslovets-Inc/ckeditor5-build-strapi-wysiwyg ↗

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