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.