83 lines
2.3 KiB
TypeScript
83 lines
2.3 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 ? ' *': '')}}"
|
|
(paste)="pasteWithoutFormatting($event)"></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',
|
|
customClasses: [
|
|
{ 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'}
|
|
],
|
|
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;
|
|
}
|
|
|
|
pasteWithoutFormatting($event) {
|
|
$event.preventDefault();
|
|
const text = $event.clipboardData.getData("text/plain");
|
|
window.document.execCommand("insertText", false, text);
|
|
}
|
|
}
|