Strapi Admin Customization - WYSIWYG replacement

commentsBot · July 9, 2021, 1:17pm

Disclaimer: An official documentation for replacing the default WYSIWYG with CKeditor has been published here

This is a companion discussion topic for the original entry at https://strapi.io/blog/how-to-change-the-wysiwyg-in-strapi

Lincoln_Lemos · November 23, 2021, 1:23pm

As a suggestion, the article should cover the fix for uploading images too.

pranjal_doorwar · January 24, 2022, 6:29am

I Agree with this.

tronglongphung · March 8, 2022, 5:10am

I had trouble deploy this application into heroku after adding ckeditor 5.

The error was like this:

resolve '@ckeditor/ckeditor5-react' in '/tmp/build_f5fca8d3/src/plugins/wysiwyg/admin/src/components/Editor'
remote:   Parsed request is a module
remote:   using description file: /tmp/build_f5fca8d3/src/plugins/wysiwyg/package.json (relative path: ./admin/src/components/Editor)
remote:     Field 'browser' doesn't contain a valid alias configuration
remote:     resolve as module

ahmedjadan · March 12, 2022, 12:58pm

i have gone through the docs, it works just fine in the development, but when i push to DigitalOcean it throw an error

] ℹ Compiling Webpack
[2022-03-12 12:55:44] ModuleNotFoundError: Module not found: Error: Can't resolve '@ckeditor/ckeditor5-react' in '/workspace/src/plugins/wysiwyg/admin/src/components/Editor'
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/Compilation.js:2011:28
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:795:13
[2022-03-12 12:55:44]     at eval (eval at create (/workspace/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:275:22
[2022-03-12 12:55:44]     at eval (eval at create (/workspace/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:431:22
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:124:11
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:667:25
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:852:8
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:972:5
[2022-03-12 12:55:44]     at /workspace/node_modules/neo-async/async.js:6883:13
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:955:45
[2022-03-12 12:55:44]     at finishWithoutResolve (/workspace/node_modules/enhanced-resolve/lib/Resolver.js:312:11)
[2022-03-12 12:55:44]     at /workspace/node_modules/enhanced-resolve/lib/Resolver.js:386:15
[2022-03-12 12:55:44]     at /workspace/node_modules/enhanced-resolve/lib/Resolver.js:435:5
[2022-03-12 12:55:44]     at eval (eval at create (/workspace/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
[2022-03-12 12:55:44] resolve '@ckeditor/ckeditor5-react' in '/workspace/src/plugins/wysiwyg/admin/src/components/Editor'
[2022-03-12 12:55:44]   Parsed request is a module
[2022-03-12 12:55:44]   using description file: /workspace/src/plugins/wysiwyg/package.json (relative path: ./admin/src/components/Editor)
[2022-03-12 12:55:44]     Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]     resolve as module
[2022-03-12 12:55:44]       /workspace/src/plugins/wysiwyg/admin/src/components/Editor/node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       /workspace/src/plugins/wysiwyg/admin/src/components/node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       /workspace/src/plugins/wysiwyg/admin/src/node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       /workspace/src/plugins/wysiwyg/admin/node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       /workspace/src/plugins/wysiwyg/node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       /workspace/src/plugins/node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       /workspace/src/node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       looking for modules in /workspace/node_modules
[2022-03-12 12:55:44]         single file module
[2022-03-12 12:55:44]           using description file: /workspace/package.json (relative path: ./node_modules/@ckeditor/ckeditor5-react)
[2022-03-12 12:55:44]             no extension
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@ckeditor/ckeditor5-react doesn't exist
[2022-03-12 12:55:44]             .js
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@ckeditor/ckeditor5-react.js doesn't exist
[2022-03-12 12:55:44]             .jsx
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@ckeditor/ckeditor5-react.jsx doesn't exist
[2022-03-12 12:55:44]             .react.js
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@ckeditor/ckeditor5-react.react.js doesn't exist
[2022-03-12 12:55:44]         /workspace/node_modules/@ckeditor/ckeditor5-react doesn't exist
[2022-03-12 12:55:44]       /node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       looking for modules in /workspace/node_modules/@strapi/admin/node_modules
[2022-03-12 12:55:44]         single file module
[2022-03-12 12:55:44]           using description file: /workspace/node_modules/@strapi/admin/package.json (relative path: ./node_modules/@ckeditor/ckeditor5-react)
[2022-03-12 12:55:44]             no extension
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@strapi/admin/node_modules/@ckeditor/ckeditor5-react doesn't exist
[2022-03-12 12:55:44]             .js
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@strapi/admin/node_modules/@ckeditor/ckeditor5-react.js doesn't exist
[2022-03-12 12:55:44]             .jsx
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@strapi/admin/node_modules/@ckeditor/ckeditor5-react.jsx doesn't exist
[2022-03-12 12:55:44]             .react.js
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@strapi/admin/node_modules/@ckeditor/ckeditor5-react.react.js doesn't exist
[2022-03-12 12:55:44]         /workspace/node_modules/@strapi/admin/node_modules/@ckeditor/ckeditor5-react doesn't exist
[2022-03-12 12:55:44] ModuleNotFoundError: Module not found: Error: Can't resolve '@ckeditor/ckeditor5-react' in '/workspace/src/plugins/wysiwyg/admin/src/components/Editor'
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/Compilation.js:2011:28
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:795:13
[2022-03-12 12:55:44]     at eval (eval at create (/workspace/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:10:1)
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:275:22
[2022-03-12 12:55:44]     at eval (eval at create (/workspace/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:431:22
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:124:11
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:667:25
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:852:8
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:972:5
[2022-03-12 12:55:44]     at /workspace/node_modules/neo-async/async.js:6883:13
[2022-03-12 12:55:44]     at /workspace/node_modules/webpack/lib/NormalModuleFactory.js:955:45
[2022-03-12 12:55:44]     at finishWithoutResolve (/workspace/node_modules/enhanced-resolve/lib/Resolver.js:312:11)
[2022-03-12 12:55:44]     at /workspace/node_modules/enhanced-resolve/lib/Resolver.js:386:15
[2022-03-12 12:55:44]     at /workspace/node_modules/enhanced-resolve/lib/Resolver.js:435:5
[2022-03-12 12:55:44]     at eval (eval at create (/workspace/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
[2022-03-12 12:55:44] resolve '@ckeditor/ckeditor5-react' in '/workspace/src/plugins/wysiwyg/admin/src/components/Editor'
[2022-03-12 12:55:44]   Parsed request is a module
[2022-03-12 12:55:44]   using description file: /workspace/src/plugins/wysiwyg/package.json (relative path: ./admin/src/components/Editor)
[2022-03-12 12:55:44]     Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]     resolve as module
[2022-03-12 12:55:44]       /workspace/src/plugins/wysiwyg/admin/src/components/Editor/node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       /workspace/src/plugins/wysiwyg/admin/src/components/node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       /workspace/src/plugins/wysiwyg/admin/src/node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       /workspace/src/plugins/wysiwyg/admin/node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       /workspace/src/plugins/wysiwyg/node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       /workspace/src/plugins/node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       /workspace/src/node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       looking for modules in /workspace/node_modules
[2022-03-12 12:55:44]         single file module
[2022-03-12 12:55:44]           using description file: /workspace/package.json (relative path: ./node_modules/@ckeditor/ckeditor5-react)
[2022-03-12 12:55:44]             no extension
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@ckeditor/ckeditor5-react doesn't exist
[2022-03-12 12:55:44]             .js
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@ckeditor/ckeditor5-react.js doesn't exist
[2022-03-12 12:55:44]             .jsx
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@ckeditor/ckeditor5-react.jsx doesn't exist
[2022-03-12 12:55:44]             .react.js
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@ckeditor/ckeditor5-react.react.js doesn't exist
[2022-03-12 12:55:44]         /workspace/node_modules/@ckeditor/ckeditor5-react doesn't exist
[2022-03-12 12:55:44]       /node_modules doesn't exist or is not a directory
[2022-03-12 12:55:44]       looking for modules in /workspace/node_modules/@strapi/admin/node_modules
[2022-03-12 12:55:44]         single file module
[2022-03-12 12:55:44]           using description file: /workspace/node_modules/@strapi/admin/package.json (relative path: ./node_modules/@ckeditor/ckeditor5-react)
[2022-03-12 12:55:44]             no extension
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@strapi/admin/node_modules/@ckeditor/ckeditor5-react doesn't exist
[2022-03-12 12:55:44]             .js
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@strapi/admin/node_modules/@ckeditor/ckeditor5-react.js doesn't exist
[2022-03-12 12:55:44]             .jsx
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@strapi/admin/node_modules/@ckeditor/ckeditor5-react.jsx doesn't exist
[2022-03-12 12:55:44]             .react.js
[2022-03-12 12:55:44]               Field 'browser' doesn't contain a valid alias configuration
[2022-03-12 12:55:44]               /workspace/node_modules/@strapi/admin/node_modules/@ckeditor/ckeditor5-react.react.js doesn't exist
[2022-03-12 12:55:44]         /workspace/node_modules/@strapi/admin/node_modules/@ckeditor/ckeditor5-react doesn't exist
[2022-03-12 12:55:44] error Command failed with exit code 1.
[2022-03-12 12:55:44] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[2022-03-12 12:55:44] building: exit status 1
[2022-03-12 12:55:44] ERROR: failed to

please help

arthur-bri · March 26, 2022, 11:21am

Hi, I think you probably need to run a command somewhere in your script / pipeline to install plugin dependencies (navigate to the plugin directory, then npm install or yarn install).
Maybe I’m wrong but I would have tried this.

tronglongphung · March 26, 2022, 11:39am

Yeah, I made a prebuild script and it worked!

@ahmedjadan have you tried making a prebuild script?

ahmedjadan · March 30, 2022, 2:54pm

Thanks folks, i have added the wysiwyg dependencies to the root package.json, and it works.

ansmlc · April 30, 2022, 3:16pm

Is this solution a good match for an React Native Expo project, also using Cloudinary CDN image plugin?

kahanu · July 23, 2022, 4:44am

I did everything verbatim and I’m still seeing the Markdown editor, not the CKEditor. Any ideas why?

No errors, just no change.

Windows 10
Node - 16.5.1
npm - 8.12.1

I need to change the editor so I can receive HTML in the JSON, and not Markdown, so I can post the results in my Angular application.

Tushar_Goel · August 12, 2022, 8:13am

Hi, Can anyone tell, how to handle videos and files upload as well in the hadleChangeAssets function?

rsmrahul · September 3, 2022, 6:48pm

Same for me too, found any solution?

Diego_Vinicius · September 15, 2022, 7:33pm

Is this work in strapi v4?

floatrx · March 10, 2024, 5:45pm

MdxEditor

Rich text editor
Markdown editor
Live preview
Customizable
Keyboard shortcuts

check: GitHub - floatrx/strapi-wysiwyg-mdxeditor-plugin: MdxEditor Wysiwyg editor for STRAPI
Please leave feedback if you like this editor or find some bugs.