hopefully i'm not being too dense here. We have a requirement that a WebPart includes the CKEditor V5. But we need to implement some of the third party plugins that are listed on the CKEditor website.

EDIT: [Removed initial code as it's no longer the approach that I'm taking]

I've had some minor success in forking the CKEditor classic repo and using npm run build to then add it into the SPfx project as a single js file.

So the next step that I'm not sure of is adding the custom plugins into the CKEditor build. I'd like to add in Simple Buttons. The CK documentations tate that we simple add an Import of it, and then amend the ClassicEditor.builtinPlugins array adding in the new plugin and then adding a button into the toolbar.

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
    image: {
        toolbar: [
    table: {
        contentToolbar: [
    // This value must be kept in sync with the language defined in webpack.config.js.
    language: 'en'

However I have no idea where the 'custombutton' is supposed to come from. I was hoping someone here might have implemented a custom CKEditor build in a webpart before and could lend some guidance. Thanks.

  • It would help if you provided the actual errors. Are they compile time errors?
    – Joe McShea
    Feb 7, 2019 at 14:55
  • @JoeMcShea I've just made an edit to my question as I've progressed a little further since asking.
    – JoeTomks
    Feb 7, 2019 at 15:09


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.