I'm trying out the demo of CKEditor with CKFinder in Angular, and I got the CKFinder module running. When I open the file manager modal in the editor, I get to see a bunch of pictures of which I have no idea where they come from; and when I drop an image file into the modal I see an alert saying 'File upload is not allowed'. I must be missing some configuration, and I've spent over a day getting this to work, but the documentation is such a vague messy place that I can't figure out how to make this work. Other CKFinder issues here on SO seem to be mostly related to their server configuration.
My code looks as follows:
// app.component.ts
import CKEditor from '@ckeditor/ckeditor5-build-decoupled-document';
...
editor = CKEditor;
config = {
licenseKey: '<trial token>',
ckfinder: {
uploadUrl: '/app/server.js'
},
toolbar: ['bold', 'italic', '|', 'link', '|', 'undo', 'redo', 'CKFinder']
}
onReady = (editor: CKEditor): void => {
const element = editor.ui.getEditableElement()!;
const parent = element.parentElement!;
parent.insertBefore(editor.ui.view.toolbar.element!, element);
}
// app.component.html
<ckeditor
[editor]="editor"
[config]="config"
(ready)="onReady($event)"
></ckeditor>
I've tried a lot of things, such as:
- using a custom adapter (not sure if this is necessary at all), but the upload function in it is never even triggered;
- adding
plugins: [CKFinder]
to the config object, but this breaks the application (many 'incorrect token' errors in svg files).
Please note that this message comes from CKEditor itself, as no attempt to communicate with a server is made. The provided uploadUrl
is therefore irrelevant, I think.