Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

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
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


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



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 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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(