Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

CKEditor how to add plugins


I added this code in gulp.config.js


...
ckeditorclassic: {
src: {
scripts: [
"{$config.path.node_modules}/@ckeditor/ckeditor5-build-classic/build/ckeditor.js",
"{$config.path.node_modules}/@ckeditor/ckeditor5-alignment/build/alignment.js"
]
},
dist: {
scripts: "{$config.dist}/plugins/custom/ckeditor/ckeditor-classic.bundle.js"
}
},
...


This is the handler I made

const handleCKEDITOR = (selector) => {
ClassicEditor
.create(document.querySelector(selector), {
plugins: [Alignment],
toolbar: {
items: [
"heading",
"|",
"bold",
"italic",
"underline",
"strikethrough",
"|",
"alignment",
"|",
"numberedList",
"bulletedList",
"|",
"link",
"blockQuote",
"insertTable",
"imageUpload",
"mediaEmbed",
"|",
"undo",
"redo"
],
shouldNotGroupWhenFull: true
},
language: "en"
})
.then(editor => {
console.log("Editor was initialized", editor);
})
.catch(error => {
console.error(error.stack);
});
}


It errors out : Uncaught ReferenceError: CKEditor5 is not defined


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


Hi James,

Could you please try to redownload from here:

https://devs.keenthemes.com/metronic

Thanks



Sorry for late reply, I've upgraded to v8.2.0 still getting the CKEditor5 with same configuration from previous snippet



We forgot to mentioned. After removing it, you need to rebuild the assets using gulp. Have you done it?

We will include the fix soon.

Thanks



Yep, I run gulp compile after removing the given line of code.



Hi,

We are aware of the issue with CKEditor5 not being defined. We are currently working on a fix for this. In the meantime, as a workaround, you can remove the following part from your code:

Navigate to the /tools/gulp/helpers.js file in your project


.pipe(() => {
return gulpif(!jsSourcemaps, removeSourcemaps());
})


This workaround should resolve the issue. We apologize for any inconvenience this may have caused, and we appreciate your patience. If you have any further questions or need assistance, please let us know.

Thanks



Thanks for the reply,

Removing didn't help me so I switch to the downloadable CKEditor for the meantime and will wait for the update fix. Thanks once again cheers


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(