Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ckeditor5 version 27.1 doesnt get the ngmodel with angular #9620

Closed
ldoreillepro opened this issue May 4, 2021 · 7 comments · Fixed by ckeditor/ckeditor5-angular#263
Closed
Assignees
Labels
squad:integrations support:2 An issue reported by a commercially licensed client. type:bug This issue reports a buggy (incorrect) behavior.

Comments

@ldoreillepro
Copy link

From the version 27.1, with angular, we can use the @input data correctly but not the @input ngModel which cannot download the content into the ckeditor.

So we start with an empty editor.

image

image

This is a basic code to reproduce the problem

https://github.com/ldoreillepro/ldoreillepro-test-angular-ckeditor5-27-1

I only added a basic ckeditor in thefolder src/app

@ldoreillepro ldoreillepro added the type:bug This issue reports a buggy (incorrect) behavior. label May 4, 2021
@pulkitpatel95
Copy link

same issue. can we create a previous version build using online builder ?

@ldoreillepro
Copy link
Author

@pulkitpatel95 you must compile it using the version 26 by yourself

@ldoreillepro
Copy link
Author

ldoreillepro commented May 21, 2021

@ma2ciek

in the following file of the package ckeditor5-angular

https://github.com/ckeditor/ckeditor5-angular/blob/master/src/ckeditor/ckeditor.component.ts

It seems that the the method "writeValue" doesn't make it job correctly (line 240 to 245)

We can correct that by adding a line in the method "setUpEditorEvents"

If we add the following line:
editor.setData(this.data);
after the line 371, it works

So From that:
const viewDocument = editor.editing.view.document;

We move to that:

    const viewDocument = editor.editing.view.document;
    editor.setData(this.data);

It's clearly a problem to know when the CKEditor is initialized ....

I hope it will help your developers

@ldoreillepro
Copy link
Author

ldoreillepro commented May 21, 2021

Much better
We must initialize the value of the editor when we create it

It must be done in the method "attachToWatchdog" (line 285)

so the line:
editor.setData(this.data);
must be placed line 301 before we return the object editor

With this modification the line 253,254,255 can be commented/removed

@ma2ciek
Copy link
Contributor

ma2ciek commented May 21, 2021

Hi @ldoreillepro

Thanks for reporting the issue and the PR, I confirm the issue.

so the line:
editor.setData(this.data);
must be placed line 301 before we return the object editor

Unfortunately, this is not a good fix as we need to have real-time editing in mind and support it as well.

But, perhaps, we can extend the configuration with the initial data. I'll check it.

Interestingly, I don't recall any recent CKEditor 5 change that broke the current solution 😅

@pulkitpatel95
Copy link

Hi @ma2ciek ,

Any update on above issue or when we can expect a fix for this ?

@pomek pomek added this to the iteration 44 milestone Jun 7, 2021
@martynawierzbicka martynawierzbicka added the support:2 An issue reported by a commercially licensed client. label Jun 15, 2021
pomek added a commit to ckeditor/ckeditor5-angular that referenced this issue Jun 25, 2021
Fix: Fixed setting data on the editor component when the component is initializing. Closes ckeditor/ckeditor5#9620.
@ma2ciek
Copy link
Contributor

ma2ciek commented Jun 25, 2021

The fix landed on the master branch. We plan to release it at the beginning of the next week.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
squad:integrations support:2 An issue reported by a commercially licensed client. type:bug This issue reports a buggy (incorrect) behavior.
Projects
None yet
5 participants