change config update behavior for editors

tinyMCE editors will not update after a timeout, but when focus changes
or the editor is destroyed
This commit is contained in:
Maximilian Krambach 2019-03-04 11:49:36 +01:00
parent 4174f70d2b
commit cc5e38faad
2 changed files with 29 additions and 1 deletions

View File

@ -91,7 +91,7 @@
<!-- The editor --> <!-- The editor -->
<div *ngIf="configItem.inputType === 'markupText'"> <div *ngIf="configItem.inputType === 'markupText'">
<h4>{{ configItem.label | translate }}</h4> <h4>{{ configItem.label | translate }}</h4>
<editor formControlName="value" [init]="tinyMceSettings"></editor> <editor formControlName="value" [init]="getTinyMceSettings()"></editor>
<span matSuffix> <span matSuffix>
<mat-icon pull="right" class="text-success" *ngIf="updateSuccessIcon">check_circle</mat-icon> <mat-icon pull="right" class="text-success" *ngIf="updateSuccessIcon">check_circle</mat-icon>
</span> </span>

View File

@ -145,6 +145,10 @@ export class ConfigFieldComponent extends BaseComponent implements OnInit {
* Trigger an update of the data * Trigger an update of the data
*/ */
private onChange(value: any): void { private onChange(value: any): void {
if (this.configItem.inputType === 'markupText') {
// tinyMCE markuptext does not autoupdate on change, only when entering or leaving
return;
}
if (this.configItem.inputType === 'datetimepicker') { if (this.configItem.inputType === 'datetimepicker') {
this.dateValue = new Date(value as number); this.dateValue = new Date(value as number);
} }
@ -264,4 +268,28 @@ export class ConfigFieldComponent extends BaseComponent implements OnInit {
public hasDefault(): boolean { public hasDefault(): boolean {
return this.configItem.defaultValue !== undefined && this.configItem.defaultValue !== null; return this.configItem.defaultValue !== undefined && this.configItem.defaultValue !== null;
} }
/**
* Amends the application-wide tinyMCE settings with update triggers that
* send updated values only after leaving focus (Blur) or closing the editor (Remove)
*
* @returns an instance of tinyMCE settings with additional setup definitions
*/
public getTinyMceSettings(): object {
return {
...this.tinyMceSettings,
setup: editor => {
editor.on('Blur', ev => {
if (ev.target.getContent() !== this.translatedValue) {
this.update(ev.target.getContent());
}
});
editor.on('Remove', ev => {
if (ev.target.getContent() !== this.translatedValue) {
this.update(ev.target.getContent());
}
});
}
};
}
} }