68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import {Component, Input} from "@angular/core";
|
|
import {AngularEditorConfig} from "@kolkov/angular-editor";
|
|
import {FormControl} from "@angular/forms";
|
|
|
|
@Component({
|
|
selector: 'rich-text-editor-component',
|
|
template: `
|
|
<div class="editor-wrapper" [class]="wrapperClasses" [formGroup]="parentFormGroup">
|
|
<angular-editor class="full-width editor" [ngClass]="editable ? '': 'disabled'" [id]="id"
|
|
[config]="editorConfig" [formControlName]="controlName"
|
|
placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"></angular-editor>
|
|
<mat-icon *ngIf="formInput.value" (click)="formInput.patchValue('')" class="clear">close</mat-icon>
|
|
</div>
|
|
`,
|
|
styleUrls: ['./rich-text-editor.component.scss']
|
|
})
|
|
export class RichTextEditorComponent {
|
|
@Input() parentFormGroup;
|
|
@Input() controlName;
|
|
@Input() id: string = "editor1";
|
|
@Input() placeholder: string = "Enter text";
|
|
@Input() required: boolean = false;
|
|
@Input() wrapperClasses: string = "";
|
|
@Input() editable: boolean = true;
|
|
|
|
editorConfig: AngularEditorConfig = {
|
|
editable: this.editable,
|
|
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',
|
|
toolbarHiddenButtons: [
|
|
[
|
|
'heading',
|
|
'fontName'
|
|
],
|
|
[
|
|
'fontSize',
|
|
'backgroundColor',
|
|
'customClasses',
|
|
'insertImage',
|
|
'insertVideo',
|
|
'removeFormat',
|
|
'toggleEditorMode'
|
|
]
|
|
]
|
|
};
|
|
|
|
get formInput(): FormControl {
|
|
return this.parentFormGroup.get(this.controlName);
|
|
}
|
|
|
|
ngAfterContentInit() {
|
|
this.editorConfig.editable = this.editable;
|
|
}
|
|
}
|