Hi,
I tried to extend the CKEditor5 with a simple functionality: I wanted to be able to add
when I enter CTRL + Space
in the editor. I failed doing that, obviously
What I got:
My Settings.yaml
Neos:
Neos:
Ui:
resources:
javascript:
'My.EditorPlugins:Spaces':
resource: 'resource://My.EditorPlugins.Spaces/Public/Spaces/Plugin.js'
The Resources/Private/Spaces/src/index.js
contains: require('./manifest');
Resources/Private/Spaces/src/manifest.js
manifest('My.EditorPlugins:Spaces', {}, globalRegistry => {
const addSpacesPluginToCkEditorConfig = (ckEditorConfiguration, options) => {
ckEditorConfiguration.plugins = ckEditorConfiguration.plugins || [];
return $add('plugins', Spaces, ckEditorConfiguration);
};
const config = globalRegistry.get('ckEditor5').get('config');
config.set('spaces', addSpacesPluginToCkEditorConfig);
});
The actual plugin code in Resources/Private/Spaces/src/Plugin.js
:
(which is actually a slightly modified copy of a ckeditor4 plugin)
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
export default class Spaces extends Plugin {
init() {
this.editor.addCommand( 'insertNbsp', {
exec: function( editor ) {
editor.insertHtml( ' ', 'text' );
}
});
editor.setKeystroke( CKEDITOR.CTRL + 32 /* space */, 'insertNbsp' );
}
}
And finally the package.json
{
"description": "",
"license": "GNU GPLv3",
"private": true,
"scripts": {
"build": "neos-react-scripts build",
"watch": "neos-react-scripts watch"
},
"devDependencies": {
"@neos-project/neos-ui-extensibility": "*"
},
"neos": {
"buildTargetDirectory": "../../Public/Spaces"
},
"dependencies": {
"@ckeditor/ckeditor5-engine": "^11.0",
"@ckeditor/ckeditor5-core": "^10.0"
}
}
I did forced flush the cache, did a ./flow flow:package:rescan
and ran yarn
yarn output:
$ yarn
yarn install v1.17.3
[1/4] Resolving packages...
warning jest > jest-cli > prompts > kleur@2.0.2: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "linux" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 64.14s.
I also ran npm run build
, but npm
did not build a Plugin.js in Public
. Maybe because the unmet peer dependencies?
Finally: In the backend I get the error:
Uncaught SyntaxError: Unexpected identifier Plugin.js:8
Because the import of Plugin
from import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
does not work.
I got stuck here. I watched the Video in the manual but it only got me where I am now.
Any help is appreciated.
Many thanks in advance.