2023-12-28 16:18:49 +01:00
|
|
|
import { ChangeDetectionStrategy, Component, Input } from "@angular/core";
|
2024-01-19 13:28:31 +01:00
|
|
|
import { FormControl } from "@angular/forms";
|
2023-12-28 16:18:49 +01:00
|
|
|
import { AngularEditorConfig } from "@kolkov/angular-editor";
|
2021-11-01 13:45:02 +01:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'rich-text-editor-component',
|
|
|
|
template: `
|
2024-01-19 13:28:31 +01:00
|
|
|
<div class="editor-wrapper" [class]="wrapperClasses">
|
|
|
|
<!-- <angular-editor class="full-width editor" [ngClass]="editable ? '': 'disabled'" [id]="id"
|
|
|
|
[config]="editorConfig" [formControl]="form"
|
2022-05-03 17:06:32 +02:00
|
|
|
placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"
|
|
|
|
(paste)="pasteWithoutFormatting($event)"></angular-editor>
|
2024-01-19 13:28:31 +01:00
|
|
|
<mat-icon *ngIf="form.value && editable" (click)="parentFormGroup.get(controlName).patchValue('')" class="clear">close</mat-icon> -->
|
|
|
|
<mat-form-field class="full-width editor">
|
|
|
|
<mat-label>{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}</mat-label>
|
|
|
|
<textarea matInput [formControl]="form" rows="5" placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"></textarea>
|
|
|
|
</mat-form-field>
|
2021-11-01 13:45:02 +01:00
|
|
|
</div>
|
|
|
|
`,
|
2023-12-28 16:18:49 +01:00
|
|
|
styleUrls: ['./rich-text-editor.component.scss'],
|
|
|
|
// TODO: performance issue with this control. changed the change detection strategy in case it improves
|
|
|
|
changeDetection: ChangeDetectionStrategy.OnPush
|
2021-11-01 13:45:02 +01:00
|
|
|
})
|
|
|
|
export class RichTextEditorComponent {
|
2024-01-19 13:28:31 +01:00
|
|
|
@Input() form: FormControl;
|
2021-11-01 13:45:02 +01:00
|
|
|
@Input() id: string = "editor1";
|
|
|
|
@Input() placeholder: string = "Enter text";
|
|
|
|
@Input() required: boolean = false;
|
|
|
|
@Input() wrapperClasses: string = "";
|
2022-02-28 17:08:38 +01:00
|
|
|
@Input() editable: boolean = true;
|
2021-11-01 13:45:02 +01:00
|
|
|
|
|
|
|
editorConfig: AngularEditorConfig = {
|
2022-02-28 17:08:38 +01:00
|
|
|
editable: this.editable,
|
2021-11-01 13:45:02 +01:00
|
|
|
spellcheck: true,
|
|
|
|
height: 'auto',
|
|
|
|
minHeight: '0',
|
|
|
|
maxHeight: 'auto',
|
|
|
|
width: '100%',
|
|
|
|
minWidth: '0',
|
|
|
|
translate: 'yes',
|
|
|
|
enableToolbar: true,
|
|
|
|
showToolbar: true,
|
|
|
|
placeholder: '',
|
|
|
|
defaultParagraphSeparator: '',
|
|
|
|
defaultFontName: '',
|
|
|
|
defaultFontSize: '',
|
|
|
|
sanitize: true,
|
|
|
|
toolbarPosition: 'top',
|
2022-05-03 17:06:32 +02:00
|
|
|
customClasses: [
|
2023-12-28 16:18:49 +01:00
|
|
|
{ name: 'H1 header', class: '', tag: 'h1' },
|
|
|
|
{ name: 'H2 header', class: '', tag: 'h2' },
|
|
|
|
{ name: 'H3 header', class: '', tag: 'h3' },
|
|
|
|
{ name: 'H4 header', class: '', tag: 'h4' },
|
|
|
|
{ name: 'H5 header', class: '', tag: 'h5' },
|
|
|
|
{ name: 'H6 header', class: '', tag: 'h6' }
|
2022-05-03 17:06:32 +02:00
|
|
|
],
|
2021-11-01 13:45:02 +01:00
|
|
|
toolbarHiddenButtons: [
|
|
|
|
[
|
|
|
|
'heading',
|
|
|
|
'fontName'
|
|
|
|
],
|
|
|
|
[
|
|
|
|
'fontSize',
|
2023-06-16 13:10:52 +02:00
|
|
|
// 'backgroundColor',
|
2022-05-03 17:06:32 +02:00
|
|
|
// 'customClasses',
|
2021-11-01 13:45:02 +01:00
|
|
|
'insertImage',
|
|
|
|
'insertVideo',
|
2022-05-03 17:06:32 +02:00
|
|
|
// 'removeFormat',
|
2021-11-01 13:45:02 +01:00
|
|
|
'toggleEditorMode'
|
|
|
|
]
|
|
|
|
]
|
|
|
|
};
|
|
|
|
|
2023-12-28 16:18:49 +01:00
|
|
|
|
|
|
|
ngOnInit() {
|
|
|
|
console.log('ngOnInit: ');
|
2021-11-01 13:45:02 +01:00
|
|
|
}
|
2022-02-28 17:08:38 +01:00
|
|
|
|
|
|
|
ngAfterContentInit() {
|
|
|
|
this.editorConfig.editable = this.editable;
|
|
|
|
}
|
2022-05-03 17:06:32 +02:00
|
|
|
|
|
|
|
pasteWithoutFormatting($event) {
|
|
|
|
$event.preventDefault();
|
|
|
|
const text = $event.clipboardData.getData("text/plain");
|
|
|
|
window.document.execCommand("insertText", false, text);
|
|
|
|
}
|
2021-11-01 13:45:02 +01:00
|
|
|
}
|