CKEditor is empty if ngModel is populated before `instanceready`
See original GitHub issueUsing <ckeditor>
the way the example shows seems to exhibit a problem:
import { Component } from '@angular/core';
@Component({
selector: 'sample',
template: `
<ckeditor
[(ngModel)]="ckeditorContent"
[config]="{uiColor: '#99000'}"
(change)="onChange($event)"
(ready)="onReady($event)"
(focus)="onFocus($event)"
(blur)="onBlur($event)"
debounce="500">
</ckeditor>
`
})
export class Sample{
constructor(){
this.ckeditorContent = `<p>My HTML</p>`;
}
}
If my ngModel value is set before the CKEditor’s instanceready
event has fired, my CKEditor element will be blank.
I noticed this on my page when my Web Service call returns data before my CKEditor’s instanceready event has fired. I worked around it by calling my Web Service only after the instanceready event, like this:
import { Component } from '@angular/core';
@Component({
selector: 'sample',
template: `
<ckeditor
[(ngModel)]="ckeditorContent"
[config]="{uiColor: '#99000'}"
(change)="onChange($event)"
(ready)="onReady($event)"
(focus)="onFocus($event)"
(blur)="onBlur($event)"
debounce="500">
</ckeditor>
`
})
export class Sample{
ckeditorContent = '';
constructor(){}
onReady() {
this.ckeditorContent = `<p>My HTML</p>`;
}
}
Has anyone else encountered the same problem?
I am using ng2-ckeditor@1.1.8 and CKEDITOR@4.6.2.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:2
- Comments:6 (1 by maintainers)
Top Results From Across the Web
ng2-ckeditor ngModel doesn't update, events not firing
However when I type, the value in ngModel doesn't change, and the change and editorChange events don't fire. The ready event does fire....
Read more >Current - CKEditor 4 Documentation
The first one is fired only once, when the CKEDITOR global namespace is loaded while the latter is fired right before any instance...
Read more >angular ck editor - Plunker
Please set the global variable "CKEDITOR_BASEPATH" before creating editor instances. ... d=arguments[h],m;for(m in d)if(!0===b||null==a[m])if(!c||m in ...
Read more >Angular CKEditor Example with custom directive and ng-ckeditor
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-ckeditor/0.2.1/ng-ckeditor.min.js"></ ... <textarea ng-model="content" data-ck-editor></textarea>.
Read more >Useful Methods And Events In CKEditor - C# Corner
Introduction · CKEDITOR.on('instanceReady', function(ev) { · ev.editor.on('paste', function(evt) { · if (evt.data.type == 'html') { · // when paste ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I have updated your plunker. Is that what you are looking for? If you model value change between initial instatiation and component initialization, you can change the value in onReady() event like that:
Issue closed due to inactivity