Skip to content

ngFor with ng2-ckeditor #23

@7Hd

Description

@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?

Activity

changed the title [-]ngFor with ckeditor[/-] [+]ngFor with ng2-ckeditor[/+] on Aug 2, 2016
yabab-dev

yabab-dev commented on Aug 2, 2016

@yabab-dev
Owner

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

yabab-dev

yabab-dev commented on Aug 2, 2016

@yabab-dev
Owner

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

yabab-dev commented on Aug 2, 2016

@yabab-dev
Owner

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

naveedahmed1 commented on Aug 21, 2016

@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

rmcsharry commented on Oct 13, 2017

@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

HalShaw commented on Oct 16, 2017

@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

waqasdilawar commented on Jan 8, 2018

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @rmcsharry@yabab-dev@naveedahmed1@7Hd@HalShaw

        Issue actions

          ngFor with ng2-ckeditor · Issue #23 · yabab-dev/ng2-ckeditor