59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
|
import {Component, Input} from "@angular/core";
|
||
|
import {AngularEditorConfig} from "@kolkov/angular-editor";
|
||
|
|
||
|
@Component({
|
||
|
selector: 'rich-text-editor-component',
|
||
|
template: `
|
||
|
<div class="editor-wrapper" [class]="wrapperClasses" [formGroup]="parentFormGroup">
|
||
|
<angular-editor class="full-width editor" [id]="id" [config]="editorConfig" [formControlName]="controlName"
|
||
|
placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"></angular-editor>
|
||
|
</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 = "";
|
||
|
|
||
|
editorConfig: AngularEditorConfig = {
|
||
|
editable: true,
|
||
|
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'
|
||
|
]
|
||
|
]
|
||
|
};
|
||
|
|
||
|
constructor() {
|
||
|
}
|
||
|
}
|