'
+ } );
+
+ done();
+ } );
+ } );
} );
diff --git a/src/app/demo-reactive-form/demo-reactive-form.component.ts b/src/app/demo-reactive-form/demo-reactive-form.component.ts
index d865d8e..85b1c36 100644
--- a/src/app/demo-reactive-form/demo-reactive-form.component.ts
+++ b/src/app/demo-reactive-form/demo-reactive-form.component.ts
@@ -26,6 +26,13 @@ export class DemoReactiveFormComponent implements AfterViewInit {
} );
public formDataPreview?: string;
+ public shouldDisableTwoWayDataBinding = false;
+
+ public editorInstance: typeof ClassicEditor;
+
+ public toggleDisableTwoWayDataBinding(): void {
+ this.shouldDisableTwoWayDataBinding = !this.shouldDisableTwoWayDataBinding;
+ }
public ngAfterViewInit(): void {
this.demoReactiveForm!.valueChanges
@@ -34,7 +41,16 @@ export class DemoReactiveFormComponent implements AfterViewInit {
} );
}
+ public onReady( editor: typeof ClassicEditor ): void {
+ this.editorInstance = editor;
+ }
+
public onSubmit(): void {
+ // Read editor's data only when two-way data binding is disabled
+ if ( this.shouldDisableTwoWayDataBinding ) {
+ this.demoReactiveForm.value.description = this.editorInstance.getData();
+ }
+
console.log( 'Form submit, model', this.demoReactiveForm.value );
}
diff --git a/src/ckeditor/ckeditor.component.spec.ts b/src/ckeditor/ckeditor.component.spec.ts
index a491546..5da2104 100644
--- a/src/ckeditor/ckeditor.component.spec.ts
+++ b/src/ckeditor/ckeditor.component.spec.ts
@@ -61,7 +61,7 @@ describe( 'CKEditorComponent', () => {
expect( console.warn ).toHaveBeenCalledWith( 'The component requires using CKEditor 5 in version 34 or higher.' );
} );
- it( 'should not print any warninig if using CKEditor 5 in version 34 or higher', () => {
+ it( 'should not print any warning if using CKEditor 5 in version 34 or higher', () => {
window.CKEDITOR_VERSION = '34.0.0';
fixture = TestBed.createComponent( CKEditorComponent );
@@ -220,9 +220,8 @@ describe( 'CKEditorComponent', () => {
it( 'change - should not calculate editor data when the control value ancestor is not specified', () => {
fixture.detectChanges();
-
- const changeSpy = jasmine.createSpy();
- component.change.subscribe( changeSpy );
+ const spy = jasmine.createSpy();
+ component.change.subscribe( spy );
return waitCycle().then( () => {
spyOn( component.editorInstance!, 'getData' ).and.callThrough();
@@ -232,7 +231,23 @@ describe( 'CKEditorComponent', () => {
component.editorInstance!.execute( 'input', { text: 'foo' } );
expect( component.editorInstance!.getData ).toHaveBeenCalledTimes( 0 );
- expect( changeSpy ).toHaveBeenCalledTimes( 3 );
+ expect( spy ).toHaveBeenCalledTimes( 3 );
+ } );
+ } );
+
+ it( 'change - should not calculate editor data when the two way data binding is disabled', () => {
+ component.disableTwoWayDataBinding = true;
+
+ fixture.detectChanges();
+ const spy = jasmine.createSpy();
+ component.change.subscribe( spy );
+
+ return waitCycle().then( () => {
+ spyOn( component.editorInstance!, 'getData' ).and.callThrough();
+
+ component.editorInstance!.execute( 'input', { text: 'foo' } );
+
+ expect( spy ).toHaveBeenCalledTimes( 0 );
} );
} );
diff --git a/src/ckeditor/ckeditor.component.ts b/src/ckeditor/ckeditor.component.ts
index 432a14a..9edffe7 100644
--- a/src/ckeditor/ckeditor.component.ts
+++ b/src/ckeditor/ckeditor.component.ts
@@ -103,9 +103,10 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
@Input() public watchdog?: CKEditor5.ContextWatchdog;
/**
- * Allows disabling the two-way data binding mechanism. It can boosts performance for large documents if set to `true`.
+ * Allows disabling the two-way data binding mechanism. Disabling it can boost performance for large documents.
*
- * When a component is connected using the [(ngModel)] or [formControl] directives then all data will be never synchronized.
+ * When a component is connected using the [(ngModel)] or [formControl] directives and this value is set to true then none of the data
+ * will ever be synchronized.
*
* An integrator must call `editor.getData()` manually once the application needs the editor's data.
* An editor instance can be received in the `ready()` callback.