CK4Editor Aurelia Not working

1

Hi I cannot get CK4Editor to work at all with Aurelia. All the online documentation just doesn’t work.

Does anybody have any examples of CK4Editor working with Aurelia

Thanks

1 Like
2

Add ckeditor to your prepend section in aurelia.json, as it it quite an old plugin

        "prepend": [
          "node_modules/ckeditor4/ckeditor.js",
          "node_modules/promise-polyfill/dist/polyfill.min.js",
          "node_modules/requirejs/require.js"
        ],

you will also need to add some files to your web root folder, as the ckeditor loads additional files when loaded. You can use the copyfiles functionality for that:

    "copyFiles": {
      "node_modules/ckeditor4/lang/**/*": "lang",
      "node_modules/ckeditor4/skins/**/*": "skins",
"probably some more, check your browser output for 404's"
    }

next, initialize the plugin from any attached callback:

  public attached() {
    CKEDITOR.replace("editor1");
  }
1 Like
3

Hi arnederuwe

Thanks for your help, I have done the following, and still not working:

In my aurelia.json:
“platform”: {
“hmr”: false,
“open”: false,
“port”: 8080,
“host”: “localhost”,
“output”: “dist”
},
“packageManager”: “npm”,
“prepend”: [
“node_modules/ckeditor/ckeditor.js”,
“node_modules/promise-polyfill/dist/polyfill.min.js”,
“node_modules/requirejs/require.js”
],
“copyFiles”: {
“node_modules/ckeditor/lang//*": “lang”,
"node_modules/ckeditor/skins//*”: “skins”
}

In my app.html:
The proper html won’t paste properly but here is with no brackets

template
textarea name=“editor1” id=“editor1”></textarea
template

In my app.ts:

import {inject, bindable, bindingMode, containerless} from ‘aurelia-framework’;
import {CKEDITOR} from ‘…/node_modules/ckeditor’;

@containerless
@inject(Element)
export class App {

public attached() {
CKEDITOR.replace(“editor1”);
}

}

I am getting this error in chrome:

index.js?07f7:248 Possible Unhandled Promise Rejection: TypeError: Cannot read property ‘replace’ of undefined
at App.attached (app.ts?066e:14)
at Controller.attached (aurelia-templating.js?8628:3759)
at View.attached (aurelia-templating.js?8628:1767)
at ViewSlot.attached (aurelia-templating.js?8628:2130)
at eval (aurelia-framework.js?0682:115)
at eval (index.js?07f7:57)
at run (setImmediate.js?6017:40)
at runIfPresent (setImmediate.js?6017:69)
at onGlobalMessage (setImmediate.js?6017:109)

Any help would be great

Thanks

1 Like
4

Are you using webpack? If so, the help from @arnederuwe would not work since that’s for CLI built-in bundler.

I don’t know about ckeditor4, but latest v5 worked without any configuration. Recommend you to upgrade to ckeditor 5.

1 Like
5

Hi huochunpeng

I tried ckeditor5 and it worked, thank you for your idea

Thanks

1 Like
6

Hi @tonyr1971

What did you end up having to do to make CkEditor 5 work?
I’m currently trying to implement it and have not had any success.

7

Something like this:

https://gist.dumber.app/?gist=8957ab6d8c6b4fb04341f6ef228e6070&open=src%2Frich-editor.js&open=src%2Frich-editor.html

2 Likes