Add clear input in rich text editor
This commit is contained in:
parent
26e10b1299
commit
6cdf560713
|
@ -9,6 +9,7 @@
|
||||||
//}
|
//}
|
||||||
|
|
||||||
.editor-wrapper {
|
.editor-wrapper {
|
||||||
|
position: relative;
|
||||||
border: 1px solid transparent !important;
|
border: 1px solid transparent !important;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
@ -40,6 +41,14 @@
|
||||||
border: 1px solid #f44336 !important;
|
border: 1px solid #f44336 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
bottom: 5px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.full-width {
|
.full-width {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import {Component, Input} from "@angular/core";
|
import {Component, Input} from "@angular/core";
|
||||||
import {AngularEditorConfig} from "@kolkov/angular-editor";
|
import {AngularEditorConfig} from "@kolkov/angular-editor";
|
||||||
|
import {FormControl} from "@angular/forms";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'rich-text-editor-component',
|
selector: 'rich-text-editor-component',
|
||||||
|
@ -7,6 +8,7 @@ import {AngularEditorConfig} from "@kolkov/angular-editor";
|
||||||
<div class="editor-wrapper" [class]="wrapperClasses" [formGroup]="parentFormGroup">
|
<div class="editor-wrapper" [class]="wrapperClasses" [formGroup]="parentFormGroup">
|
||||||
<angular-editor class="full-width editor" [id]="id" [config]="editorConfig" [formControlName]="controlName"
|
<angular-editor class="full-width editor" [id]="id" [config]="editorConfig" [formControlName]="controlName"
|
||||||
placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"></angular-editor>
|
placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"></angular-editor>
|
||||||
|
<mat-icon *ngIf="formInput.value" (click)="formInput.patchValue('')" class="clear">close</mat-icon>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
styleUrls: ['./rich-text-editor.component.scss']
|
styleUrls: ['./rich-text-editor.component.scss']
|
||||||
|
@ -53,6 +55,7 @@ export class RichTextEditorComponent {
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor() {
|
get formInput(): FormControl {
|
||||||
|
return this.parentFormGroup.get(this.controlName);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue