CKEditor5 failing to build with additional plug ins

Question

I'm struggling with CKEditor and perhaps some of you may be able to help me, please...

Summary

I'm attempting a custom build of CKEditor5 by following this guide - https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html - The idea is to include plugins which aren't in the standard builds.

When I build the CKEditor build, push back to Github and then try and install the editor into my nodejs app (npm install from Github), the editor works, but without the plugins I've added.

Environment

Windows 10 Pro (20H2)
NVM installed to manage node versions
Node 14.6.0 used for CKEditor54 build
Node 10.22.0 used for NodeJS Project (latest supported version in the paltform I am developing for)

Steps Taken

1. Fork the CKEditor5 repo.
2. Clone the repo to my desktop using git clone -b stable https://github.com/<MyGithubUsername>/ckeditor5.git.
3. Navigate to the build directory cd D:\_source\ckeditor5\packages\ckeditor5-build-classic.
4. Run npm install.
5. I install the Font plug in to use it in this build: npm install --save-dev @ckeditor5/ckeditor5-font.
6. I then update the build configuration by adding to src/ckeditor.js:
   • import Font from '@ckeditor/ckeditor5-font/src/font';
   • ClassicEditor.builtinPlugins = [ ..., Font]
   • ClassicEditor.defaultConfig = { toolbar: { items: [' ..., fontColor, fontBackgroundColor'] } }
7. At this point, the guide says you should run yarn run build, but i can't get Yarn to work in this dev environment for love nor money, so instead I use npm run build.
8. I test the build by opening sample/index.html in the browser and it looks fine; the Font plugin is loaded and the toolbar items appear.
9. I then use Git to stage the changes, then I Commit and Push to my cloned repository.
10. In the Nodejs project where I want to use ckeditor, I install the custom build using npm install <MyGithubUsername>/ckeditor5#stable
11. To the project I add import ClassicEditor from '@ckeditor/ckeditor5-build-classic/build/ckeditor';

The editor appears as you would expect it to, but without the Font plug in. Back over in the CKEditor local repo, when I take a look at the ckeditor5\packages\ckeditor5-build-classic\build\ckeditor.js.mapand search for ckeditor5-font I find many instances of it, indicating that it has indeed included it into the build. When I look at the same file in my Nodejs project D:\_source\NodeJsProject\node_modules\@ckeditor\ckeditor5-build-classic\build\ckeditor.js.map there's no sign of ckeditor5-font; the sample.html in the NodeJS project works, but does not show the Font additions, nor do they show in the implementation in my project.

I find my waround pretty well, but I am far from being a pro front-end developer and this has me stumped.

Any help or guidance is greatly appreciated.

Answer 1

Hello i have created demo video of ckeditor5 in angular that cover custom build from github and online builder https://youtu.be/HsjCkvEvQhA

Tip. try to remove some plugin then it will work . remove one plugin at time and build and check it, this way you will find out which plugin creating issue some plugin create conflict so you have to remove it .