{"id":12962,"library":"ckeditor5-build-strapi-wysiwyg","title":"CKEditor 5 Build for Strapi WYSIWYG","description":"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.","status":"active","version":"2.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/Roslovets-Inc/ckeditor5-build-strapi-wysiwyg","tags":["javascript","ckeditor5-build","ckeditor","ckeditor5","ckeditor 5","wysiwyg","rich text","editor","html"],"install":[{"cmd":"npm install ckeditor5-build-strapi-wysiwyg","lang":"bash","label":"npm"},{"cmd":"yarn add ckeditor5-build-strapi-wysiwyg","lang":"bash","label":"yarn"},{"cmd":"pnpm add ckeditor5-build-strapi-wysiwyg","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This 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.","package":"strapi-plugin-ckeditor5","optional":false},{"reason":"Provides automatic image uploads to the Strapi Media Library, a core feature of this build. This plugin is integrated into the build itself.","package":"ckeditor5-strapi-upload-plugin","optional":false}],"imports":[{"note":"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.","wrong":"const StrapiWysiwygEditor = require('ckeditor5-build-strapi-wysiwyg');","symbol":"StrapiWysiwygEditor","correct":"import StrapiWysiwygEditor from 'ckeditor5-build-strapi-wysiwyg';"},{"note":"Configuration is passed as a second argument to the `create` method. Consult CKEditor 5 documentation for available options like `toolbar`, `mediaEmbed`, etc.","symbol":"EditorConfig","correct":"import StrapiWysiwygEditor from 'ckeditor5-build-strapi-wysiwyg';\n\nStrapiWysiwygEditor.create( /* ... */, { /* configuration */ });"},{"note":"The editor requires a DOM element (e.g., a `<div>` or `<textarea>`) to mount itself. It typically replaces the element it's mounted on.","symbol":"HTML Element","correct":"import StrapiWysiwygEditor from 'ckeditor5-build-strapi-wysiwyg';\n\nconst editorElement = document.querySelector('#editor');\nStrapiWysiwygEditor.create( editorElement )"}],"quickstart":{"code":"import StrapiWysiwygEditor from 'ckeditor5-build-strapi-wysiwyg';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n  const editorContainer = document.getElementById('editor');\n  if (editorContainer) {\n    StrapiWysiwygEditor.create(editorContainer, {\n      // Basic configuration example, adjust as needed\n      toolbar: {\n        items: [\n          'sourceEditing', '|', 'heading', '|', 'bold', 'italic', 'strikethrough', 'underline', 'highlight', '|',\n          'link', 'uploadImage', 'mediaLib', 'blockQuote', 'codeBlock', '|',\n          'numberedList', 'bulletedList', 'todoList', '|', 'indent', 'outdent', '|',\n          'alignment', '|', 'fontColor', 'fontBackgroundColor', 'fontSize', 'fontFamily', '|',\n          'horizontalLine', 'removeFormat', 'specialCharacters', 'superscript', 'subscript', '|',\n          'undo', 'redo', 'fullscreen'\n        ]\n      },\n      image: {\n        toolbar: [\n          'imageTextAlternative', 'toggleImageCaption', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side'\n        ]\n      },\n      mediaEmbed: {\n        removeProviders: ['youtube', 'vimeo', 'dailymotion'] // Example: remove some default providers\n      }\n    })\n    .then(editor => {\n      console.log('CKEditor 5 for Strapi initialized', editor);\n      editor.setData('<p>Hello from <strong>CKEditor 5</strong> for Strapi!</p>');\n    })\n    .catch(error => {\n      console.error('Error initializing CKEditor 5:', error);\n    });\n  }\n});\n\n// Minimal HTML structure for the editor\n/*\n<div id=\"editor\">\n  <p>This is the default content.</p>\n</div>\n*/","lang":"javascript","description":"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."},"warnings":[{"fix":"Upgrade to `ckeditor5-build-strapi-wysiwyg` v2.x or newer and ensure your Strapi application is also upgraded to Strapi v4 or later.","message":"Versions 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.","severity":"breaking","affected_versions":"<2.0.0"},{"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.","message":"This 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The 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.","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":"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.","cause":"The CKEditor 5 build class was not correctly imported or is not available in the global scope.","error":"TypeError: Cannot read properties of undefined (reading 'create')"},{"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).","cause":"The target DOM element for the editor was not found or was unavailable when `create()` was called.","error":"CKEditor doesn't appear or initialize on the page."},{"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.","cause":"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.","error":"Images are not uploading to the Strapi Media Library or the 'MediaLib' button does not work."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}