GrapesJS / GrapesJS/ckeditor

Add custom dropdown with grapesjs-plugin-ckeditor plugin

Open
#90 0 comments 0 reactions 0 assignees View on GitHub
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:
![image](https://user-images.githubusercontent.com/11614725/32463242-810de0fc-c33c-11e7-81df-3524c0ad55ac.gif)

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.