ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

change config update behavior for editors

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/site/config/components/config-field/config-field.component.html
View File

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

28
client/src/app/site/config/components/config-field/config-field.component.ts
View File

@ -145,6 +145,10 @@ export class ConfigFieldComponent extends BaseComponent implements OnInit {
* Trigger an update of the data
*/
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') {
this.dateValue = new Date(value as number);
}
@ -264,4 +268,28 @@ export class ConfigFieldComponent extends BaseComponent implements OnInit {
public hasDefault(): boolean {
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());
}
});
}
};
}
}