Add custom dropdown with grapesjs-plugin-ckeditor plugin
- Dominant language
- TypeScript
- Stars
- 110
- Forks
- 107
- PR merge metrics
- No merged PRs in 30d
Description
I'm working on a project using GrapesJS and the `grapesjs-plugin-ckeditor` plugin. I want to add a custom dropdown to the CKEditor toolbar, alongside other default toolbar actions, but I am encountering issues with the integration.
## Issue:
I've followed the documentation to configure CKEditor and added a custom dropdown using a CKEditor plugin. However, the dropdown doesn't appear in the toolbar as expected. It seems that the `grapesjs-plugin-ckeditor` doesn't properly support adding custom dropdowns or modifying the toolbar configuration.
## Expected
I would like something like that:

## Current Setup:
Here is my current configuration:
`````
const editor = grapesjs.init({
container: '#gjs',
components: templateContent,
plugins: [rtePlugin],
pluginsOpts: {
[rtePlugin]: {
options: {
toolbar: [
{ name: 'styles', items: ['Font', 'FontSize'] },
{ name: 'basicstyles', items: ['Bold', 'Italic'] },
// Custom Dropdown
{ name: 'customDropdown', items: ['CustomDropdown'] }
],
extraPlugins: 'customDropdown',
},
ckeditor: 'https://cdn.ckeditor.com/4.21.0/full-all/ckeditor.js'
}
}
});
CKEDITOR.plugins.add('customDropdown', {
init: function (editor) {
editor.ui.addRichCombo('CustomDropdown', {
label: 'My Custom Dropdown',
toolbar: 'customDropdown',
panel: {
multiSelect: false
},
init: function () {
this.add('option1', 'Option 1');
this.add('option2', 'Option 2');
},
onClick: function (value) {
editor.insertText('You selected: ' + value);
}
});
}
});
`````
Dependencies:
`````
"react": "18.3.1",
"grapesjs": "^0.21.8",
"grapesjs-blocks-basic": "^1.0.2",
"grapesjs-plugin-ckeditor": "^1.0.1",
"grapesjs-preset-newsletter": "^1.0.2",
``````
Thank you 🙏
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.