1

I try to setup font color with CKeditor5 in Sulu CMS (version 2.2.1), I followed this doc to do this.

So first I've added this line into assets/admin/package.json file (into "dependencies" object) :

"@ckeditor/ckeditor5-font": "^23.0.0",

Then I've added this lines into assets/admin/index.js file :

import {ckeditorPluginRegistry, ckeditorConfigRegistry} from 'sulu-admin-bundle/containers';
import Font from '@ckeditor/ckeditor5-font/src/font';

ckeditorPluginRegistry.add(Font);
ckeditorConfigRegistry.add((config) => ({
    toolbar: [...config.toolbar, 'fontColor', 'fontBackgroundColor'],
}));

And then I run this command : bin/console sulu:admin:update-build For the questions asked, I anwser the following:

  • Do you want to overwrite your local version of 'index.js' ? N
  • Do you want to overwrite your local version of 'package.json' ? N
  • Merge 'package.json' together like above ? Y
  • Do you want to create a build now ? Y

This work great, I can set colors and background colors into my text_editor content-type.

But when I try to add an image with a single_media_selection content-type, I have an blank page with this error into the browser console :

TypeError: (void 0) is not a function

If I remove all lines that I've added, single_media_selection work great, but I can't change colors into CKeditor.

Does I made a mistake somewhere ?

Quentin H
  • 91
  • 1
  • 7

1 Answers1

0

In the documentation you mentioned there is a comment saying that you have to use "@ckeditor/ckeditor5-font": "^18.0.0", if you are using sulu 2.1 and "@ckeditor/ckeditor5-font": "^23.0.0" if you are using sulu 2.2 and higher.

And since you mentioned, that you are using sulu 2.1, this is probably the mistake.

Luca Rath-Heel
  • 210
  • 1
  • 8
  • You've right, I forgot to mention it here : I've tried both versions. - With `^18.0.0` I have the same problem for the single_media_selection. And for the text_editor, it like it's in read-only mode and I have this error into the browser console : `CKEditorError: this.editor.model.document.selection.getFirstPosition().findAncestor is not a function` - With `^23.0.0` it's the situation as mentionned into my question. – Quentin H Mar 02 '21 at 14:54
  • Set the version of `@ckeditor/ckeditor5-font` back to `^18.0.0` and then run `rm -rf assets/admin/node_modules assets/admin/package-lock.json vendor/sulu/**/node_modules vendor/sulu/**/package-lock.json` in the root directory of your project and then `npm install && npm run build` inside `assets/admin/` – Luca Rath-Heel Mar 02 '21 at 15:48
  • With this, it's the same, I can't go on another page than the admin's homepage. And I have this in the browser console : `TypeError: (void 0) is not a function`. Btw I'm using Sulu 2.2.1 (I've fixed it into my initial question), so I use version `^23.0.0` – Quentin H Mar 03 '21 at 08:16