CkEditor Instance value not cleared when i call form.reset()

[mekramy]

After i submitting my form data, i'll clear form for new input. but the ckeditor instance value not cleared! how can i do that?

• i use model driven form
• i use angular 4

my template code is:
<ckeditor formControlName="content"></ckeditor>

[kzimny]

Hi, did you try to set the value to an empty string? Look at: how to reset value;
In HTML part:

                <ckeditor
                    [config]="ckeConfig"
                    #ckeditor
                    debounce="500">
                  </ckeditor>

In typescript part:

@ViewChild("ckeditor") ckeditor: any;

onEventOrRequest(event: any)
{
this.ckeditor.instance.setData('');
}

[kzimny]

@mekramy : is your problem solved? Can the task be closed?

[mekramy]

@kzimny thanks. i move to vuejs and not work with angular any more!
other people may have same issue! any way you can close my issue if you want.

[kzimny]

If other people identify the same problem, please report and the task will be reopen.

[ronakvbhatt07]

Hi What I got this workaround. But I have validation message applied to theCKEditor and it happens that whenever I am trying to reset the form. I am able to reset the CKEditor but not the message. Anything that can be helpful here?

[kzimny]

Did you try to set the form to pristine?

<form role="form" class="form-horizontal" (ngSubmit)="save(basedataForm)" #basedataForm="ngForm"></form>

and in ts file

save(myForm: NgForm) {
	myForm.form.markAsPristine();
	myForm.form.markAsUntouched();
}

[rahimnagori]

Hello guys. I'm using this ckEditor in angularJS :
https://codepen.io/mckoon/pen/XdzVOe

But getting the following errors:
Uncaught TypeError: Cannot read property 'unselectable' of null
at b (ckeditor.js:360)
at a. (ckeditor.js:356)
at a.n (ckeditor.js:10)
at a. (ckeditor.js:12)
at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13)
at a.fireOnce (ckeditor.js:12)
at a.CKEDITOR.editor.CKEDITOR.editor.fireOnce (ckeditor.js:13)
at Object. (ckeditor.js:279)
at e (ckeditor.js:258)
at Object.load (ckeditor.js:258)

I'm totally new to angular and this ckeditor thing. Help me out.
This is working fine when I apply to a new blank project just for ckeditor but when I apply it to my project I get the above error.

[sadiqodho]

Hi, did you try to set the value to an empty string? Look at: how to reset value;
In HTML part:

                <ckeditor
                    [config]="ckeConfig"
                    #ckeditor
                    debounce="500">
                  </ckeditor>

In typescript part:

@ViewChild("ckeditor") ckeditor: any;

onEventOrRequest(event: any)
{
this.ckeditor.instance.setData('');
}

Same issue occurred could not reset after submitting, I tried this but could not reset content. can you please help me in this.

[sadiqodho]

Resolved by Setting html text instead of '' string

this.ckeditor.instance.setData('<p></p>');
this.ckeditor.instance.updateElement();