0

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: [
            'heading',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'imageUpload',
            'blockQuote',
            'insertTable',
            'mediaEmbed',
            'undo',
            'redo',
            'custombutton'
        ]
    },
    image: {
        toolbar: [
            'imageStyle:full',
            'imageStyle:side',
            '|',
            'imageTextAlternative'
        ]
    },
    table: {
        contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells'
        ]
    },
    // 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 at 14:55
  • @JoeMcShea I've just made an edit to my question as I've progressed a little further since asking. – Digitalsa1nt Feb 7 at 15:09

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.