# CK4Editor Aurelia Not working

**URL:** <https://discourse.aurelia.io/t/ck4editor-aurelia-not-working/3070>\
**Category:** Uncategorized\
**Created:** [November 15, 2019, 2:40pm UTC](https://discourse.aurelia.io/t/ck4editor-aurelia-not-working/3070 "2019-11-15T14:40:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tonyr1971](https://avatars.discourse-cdn.com/v4/letter/t/cdc98d/32.png) [@tonyr1971](https://discourse.aurelia.io/u/tonyr1971)\
**Post date:** [November 15, 2019, 2:40pm UTC](https://discourse.aurelia.io/t/ck4editor-aurelia-not-working/3070/1 "2019-11-15T14:40:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![arnederuwe](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/arnederuwe/32/737_2.png) [@arnederuwe](https://discourse.aurelia.io/u/arnederuwe)\
**Post date:** [November 15, 2019, 3:27pm UTC](https://discourse.aurelia.io/t/ck4editor-aurelia-not-working/3070/2 "2019-11-15T15:27:02Z")

</div>

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

```auto
        "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:

```auto
    "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:

```auto
  public attached() {
    CKEDITOR.replace("editor1");
  }

```

---

<div class="post-metadata">

**Author:** ![tonyr1971](https://avatars.discourse-cdn.com/v4/letter/t/cdc98d/32.png) [@tonyr1971](https://discourse.aurelia.io/u/tonyr1971)\
**Post date:** [November 15, 2019, 3:49pm UTC](https://discourse.aurelia.io/t/ck4editor-aurelia-not-working/3070/3 "2019-11-15T15:49:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [November 16, 2019, 2:07am UTC](https://discourse.aurelia.io/t/ck4editor-aurelia-not-working/3070/4 "2019-11-16T02:07:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tonyr1971](https://avatars.discourse-cdn.com/v4/letter/t/cdc98d/32.png) [@tonyr1971](https://discourse.aurelia.io/u/tonyr1971)\
**Post date:** [November 16, 2019, 9:06am UTC](https://discourse.aurelia.io/t/ck4editor-aurelia-not-working/3070/5 "2019-11-16T09:06:28Z")

</div>

Hi huochunpeng

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

Thanks

---

<div class="post-metadata">

**Author:** ![allanlange](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/allanlange/32/1994_2.png) [@allanlange](https://discourse.aurelia.io/u/allanlange)\
**Post date:** [July 6, 2020, 1:19pm UTC](https://discourse.aurelia.io/t/ck4editor-aurelia-not-working/3070/6 "2020-07-06T13:19:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [July 6, 2020, 10:44pm UTC](https://discourse.aurelia.io/t/ck4editor-aurelia-not-working/3070/7 "2020-07-06T22:44:04Z")

</div>

Something like this:

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