Ckeditor4: TypeScript definition for CKEditor

[FrankWeyand]

Are you reporting a feature or a bug?

Feature

Provide detailed reproduction steps (if any)

I'd like to use the typescript definition for CKEditor.
https://www.npmjs.com/package/@types/ckeditor
think it should be CKEditor version 4.7

I used CKEditor in my angular component like this:

// declare var CKEDITOR:any;
...
export class MyComponent implements  ... {
    editor: any;
    ngOnInit(): void {
        this.editor = CKEDITOR.replace('ckeditor', ck_editor_config);

Expected result

That worked fine, but I miss intellisense.
Thus, I used the typescript definition from above.

Actual result

After adding these lines at the beginning in the index.d.ts...

export = CKEDITOR;
export as namespace CKEDITOR;

and changing my application like this...

import * as CKEDITOR from "CKEDITOR";
...
editor: CKEDITOR.editor;

... I have support in intellij idea considering intellisense and autocomplete.

What is the actual result of the above steps?

well, I get intelllisense, but unfortunatly, I get the following error at starting the app:

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_6_CKEDITOR__.replace is not a function
    at ChapterEditorComponent.webpackJsonp.192.ChapterEditorComponent.ngOnInit (http://localhost:4200/main.bundle.js:307:72)
    at checkAndUpdateDirectiveInline (http://localhost:4200/vendor.bundle.js:11468:19)
    at checkAndUpdateNodeInline (http://localhost:4200/vendor.bundle.js:12891:17)
    at checkAndUpdateNode (http://localhost:4200/vendor.bundle.js:12830:16)
    at debugCheckAndUpdateNode (http://localhost:4200/vendor.bundle.js:13533:59)
    at debugCheckDirectivesFn (http://localhost:4200/vendor.bundle.js:13474:13)
    at Object.eval [as updateDirectives] (ng:///AppModule/DocumentComponent.ngfactory.js:29:5)
    at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:4200/vendor.bundle.js:13459:21)
    at checkAndUpdateView (http://localhost:4200/vendor.bundle.js:12797:14)
    at callViewAction (http://localhost:4200/vendor.bundle.js:13160:21)
  View_DocumentComponent_1  

Other details

• Browser: chrome
• OS: win7
• CKEditor version: 4.7.0

[mlewand]

Edited original description to improve readability.

[mlewand]

@FrankWeyand so the actual problem here is that CKEditor can not be loaded by webpack, rather than anything related to TypeScript, right?

We're open for contributions in that regard, so if someone from community is interested in it PR is welcome.

[FrankWeyand]

Not sure, most likely. After my changes, which gave me the IDE support, compiler and IDE are fine, but as a consequence the "replace" method is not fetched.

[mlewand]

I'll confirm this for now, but we need to do more research on what's the cause of the problem here. Unfortunately we don't have any TS developer in core team, so that might take some time.

Having that said Community help, as always, is welcome.

[FrankWeyand]

Hi Marek,
we made some progress here.

1.) changing the index.d.ts is not needed. My changes were:

for the index.d.ts:

export = CKEDITOR;
export as namespace CKEDITOR;

in my application ts:

import * as CKEDITOR` from "CKEDITOR";

Forget both.

2.) instead we imported the definition:

///

Now intellisense is fine.

[rdeangelis83]

Hi all,

the typescript definition for ckeditor provided by @andy-ms seems to work. Importing the CKEDITOR namespace with import "CKEDITOR"; solves the problem. So this issue can be closed.

The typescript definition is not up to date but this is another problem :) So maybe an official version maintained by the ckeditor team would be nice :+1:

[mlewand]

the typescript definition for ckeditor provided by @andy-ms seems to work. Importing the CKEDITOR namespace with import "CKEDITOR"; solves the problem. So this issue can be closed.

Great, glad to hear that!

The typescript definition is not up to date but this is another problem :) So maybe an official version maintained by the ckeditor team would be nice 👍

We'd like to contribute the typings, however we can't do this manually, because it will require too much of work down the road, we want to create a way to automate it so that it will be generated based on our API docs - but this is not a quick task, so it's there on our list of nice to have things.

[devxkuldeepchopra]

Just declare it
http://prntscr.com/m2vk6r