MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

#7699: rich-text-editor.component.ts: Clear any formatting on paste and add plain text | Added h1-h6 tags in customClasses | Enable "removeFormat" button (clear formatting added from editor options).

This commit is contained in:
Konstantina Galouni 2022-05-03 18:06:32 +03:00
parent a5061759b8
commit 579bb58afc
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
dmp-frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts
View File

@ -8,7 +8,8 @@ import {FormControl} from "@angular/forms";
<div class="editor-wrapper" [class]="wrapperClasses" [formGroup]="parentFormGroup"> <div class="editor-wrapper" [class]="wrapperClasses" [formGroup]="parentFormGroup">
<angular-editor class="full-width editor" [ngClass]="editable ? '': 'disabled'" [id]="id" <angular-editor class="full-width editor" [ngClass]="editable ? '': 'disabled'" [id]="id"
[config]="editorConfig" [formControlName]="controlName" [config]="editorConfig" [formControlName]="controlName"
placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"></angular-editor> placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"
(paste)="pasteWithoutFormatting($event)"></angular-editor>
<mat-icon *ngIf="formInput.value" (click)="formInput.patchValue('')" class="clear">close</mat-icon> <mat-icon *ngIf="formInput.value" (click)="formInput.patchValue('')" class="clear">close</mat-icon>
</div> </div>
`, `,
@ -40,6 +41,14 @@ export class RichTextEditorComponent {
defaultFontSize: '', defaultFontSize: '',
sanitize: true, sanitize: true,
toolbarPosition: 'top', 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: [ toolbarHiddenButtons: [
[ [
'heading', 'heading',
@ -48,10 +57,10 @@ export class RichTextEditorComponent {
[ [
'fontSize', 'fontSize',
'backgroundColor', 'backgroundColor',
'customClasses', // 'customClasses',
'insertImage', 'insertImage',
'insertVideo', 'insertVideo',
'removeFormat', // 'removeFormat',
'toggleEditorMode' 'toggleEditorMode'
] ]
] ]
@ -64,4 +73,10 @@ export class RichTextEditorComponent {
ngAfterContentInit() { ngAfterContentInit() {
this.editorConfig.editable = this.editable; this.editorConfig.editable = this.editable;
} }
pasteWithoutFormatting($event) {
$event.preventDefault();
const text = $event.clipboardData.getData("text/plain");
window.document.execCommand("insertText", false, text);
}
} }