ngFor with ng2-ckeditor

[7Hd]

I use ckditor with ngFor, please see plnkr below.
plnkr: https://plnkr.co/edit/Rl4bBoMKOe6xFsduBaaS?p=preview

• when click button remove me 0, and then ckeditor break.
• when click button remove me 1, ckeditor still can use.

Did I miss something?

[yabab-dev]

Thanks for this plunker !
I'll try to find a solution this week.

[yabab-dev]

It seems a CKEditor bug : https://dev.ckeditor.com/ticket/12258
When we move CKEditor through the dom (like ngFor does) iframe isn't updated correctly.

Solution is to use divarea plugin or inline mode.

I need to work on that... and at the same time this approach can fix #24

[yabab-dev]

Here is the fix : https://embed.plnkr.co/PqRdBfUdvJ71uUPzY8vG/

You need to include divarea plugin :

<ckeditor [(ngModel)]="content" [config]="{extraPlugins: 'divarea'}"></ckeditor>

Inline mode is not available atm.

Thanks for reporting this !

[naveedahmed1]

@chymz I tried your solution but now I am receiving below error:

browser_adapter.ts:82 TypeError: Cannot read property 'getRanges' of null

[rmcsharry]

Note that using 'divarea' does make this error go away BUT the side effect is that now you are using a div for the editor instead of the standard hidden textarea you get with the iFrame of ckeditor out of the box. This means that the CSS styles for your website now apply inside the div (ie. inside the editor area itself). So the user changing things like font style and size could easily get unexpected results.

The correct solution to this problem is to implement the ngOnDestroy hook in your component and destroy the instance of the editor, as shown here.

[HalShaw]

@chymz
I included divarea plugin in my project and solved this problem,but I got a new error.

core.es5.js:1020 ERROR RangeError: Maximum call stack size exceeded
at MouseEvent.eval [as returnValue] (eval at (:2:479), :228:28)
at MouseEvent.eval [as returnValue] (eval at (:2:479), :228:28)
at MouseEvent.eval [as returnValue] (eval at (:2:479), :228:28)
at MouseEvent.eval [as returnValue] (eval at (:2:479), :228:28)
at MouseEvent.eval [as returnValue] (eval at (:2:479), :228:28)
at MouseEvent.eval [as returnValue] (eval at (:2:479), :228:28)
at MouseEvent.eval [as returnValue] (eval at (:2:479), :228:28)
at MouseEvent.eval [as returnValue] (eval at (:2:479), :228:28)
at MouseEvent.eval [as returnValue] (eval at (:2:479), :228:28)
at MouseEvent.eval [as returnValue] (eval at (:2:479), :228:28)

what should I do now?

[waqasdilawar]

@chymz the link is broken https://embed.plnkr.co/PqRdBfUdvJ71uUPzY8vG/, and kindly update the link. I really need to configure CkEditor-5 Inline with NgFor in Angular-5 today. So kindly provide any working example.