diff --git a/package-lock.json b/package-lock.json
index 899edcd9d78f7ed35c79401385c45dbc7fe45aba..bbcb2ca25c430d064a067b3184b9b06e6c03a477 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1695,6 +1695,14 @@
"schema-utils": "^2.7.0"
}
},
+ "@kolkov/angular-editor": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/@kolkov/angular-editor/-/angular-editor-1.2.0.tgz",
+ "integrity": "sha512-uAXsYxK62rOcgGJZdT3Q8iqJZ1k9BJchmg23+Iwy+oTtaqdzqkjl1Sgeka1uXQRWEUqFFxjxn7CpU8mNLCmeGQ==",
+ "requires": {
+ "tslib": "^2.0.0"
+ }
+ },
"@ngtools/webpack": {
"version": "12.0.5",
"resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-12.0.5.tgz",
diff --git a/package.json b/package.json
index 33c031520ba2b4fd8f7574e89b5923764206a6b4..723efac1a76ecae0df0c171117c8ecf1f6777deb 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
"@angular/platform-browser": "~12.0.5",
"@angular/platform-browser-dynamic": "~12.0.5",
"@angular/router": "~12.0.5",
+ "@kolkov/angular-editor": "^1.2.0",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"rxjs": "~6.6.0",
diff --git a/projects/common/element-components/text.component.ts b/projects/common/element-components/text.component.ts
index 510198361672a9636e8a5a5779210e0bdf94f28e..ecc65d5bf08289e68d1f724f4be7c6f6b98cc02f 100644
--- a/projects/common/element-components/text.component.ts
+++ b/projects/common/element-components/text.component.ts
@@ -14,8 +14,8 @@ import { ElementComponent } from '../element-component.directive';
[style.font-weight]="elementModel.bold ? 'bold' : ''"
[style.font-style]="elementModel.italic ? 'italic' : ''"
[style.text-decoration]="elementModel.underline ? 'underline' : ''"
- [style.white-space]="'pre-wrap'">
- {{elementModel.text}}
+ [style.white-space]="'pre-wrap'"
+ [innerHTML]="elementModel.text">
</div>
`
})
diff --git a/projects/editor/src/app/app.module.ts b/projects/editor/src/app/app.module.ts
index bc153fa83cfc297009ceeb5f25d31005c2a24ae5..d83d72e4fbfe5dff36fac965664e68af4ad78ef7 100644
--- a/projects/editor/src/app/app.module.ts
+++ b/projects/editor/src/app/app.module.ts
@@ -5,6 +5,9 @@ import { CommonModule } from '@angular/common';
import { createCustomElement } from '@angular/elements';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { HttpClientModule } from '@angular/common/http';
+import { AngularEditorModule } from '@kolkov/angular-editor';
+
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
@@ -19,7 +22,9 @@ import { SectionComponent } from './components/unit-view/page-view/canvas/sectio
import { StaticCanvasOverlayComponent } from './components/unit-view/page-view/canvas/static-canvas-overlay.component';
import { DynamicCanvasOverlayComponent } from './components/unit-view/page-view/canvas/dynamic-canvas-overlay.component';
import { SharedModule } from '../../../common/app.module';
-import { ConfirmationDialog, MultilineTextEditDialog, TextEditDialog } from './dialog.service';
+import {
+ ConfirmationDialog, MultilineTextEditDialog, RichTextEditDialog, TextEditDialog
+} from './dialog.service';
import { EditorTranslateLoader } from './editor-translate-loader';
import { PagePropertiesComponent } from './components/unit-view/page-view/properties/page-properties.component';
import { SectionPropertiesComponent } from './components/unit-view/page-view/properties/section-properties.component';
@@ -42,6 +47,7 @@ import { DynamicViewOnlyElementOverlayComponent } from './components/unit-view/p
ConfirmationDialog,
TextEditDialog,
MultilineTextEditDialog,
+ RichTextEditDialog,
PagePropertiesComponent,
SectionPropertiesComponent,
ElementPropertiesComponent,
@@ -55,6 +61,8 @@ import { DynamicViewOnlyElementOverlayComponent } from './components/unit-view/p
SharedModule,
MatButtonToggleModule,
MatSlideToggleModule,
+ HttpClientModule,
+ AngularEditorModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.ts
index 3f05a18d3a512b863a37e05146ae617e099cbe86..8e37e2e44d4cc963a1d5a4702232322a036e0147 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.ts
@@ -37,7 +37,11 @@ import { MessageService } from '../../../../../../../common/message.service';
<mat-label>Text</mat-label>
<textarea matInput type="text" cdkTextareaAutosize [value]="combinedProperties.text"
(input)="updateModel('text', $any($event.target).value)">
- </textarea>
+ </textarea>
+ <button mat-icon-button matSuffix
+ (click)="unitService.showDefaultEditDialog(selectedElements[0])">
+ <mat-icon>edit</mat-icon>
+ </button>
</mat-form-field>
<mat-form-field *ngIf="combinedProperties.type === 'text-field'">
diff --git a/projects/editor/src/app/dialog.service.ts b/projects/editor/src/app/dialog.service.ts
index 5b019bbcdf5705e72158e5386c9ea543038b4a88..7b312d0f1ef5ac688a31f73aa950e37afeeaf58b 100644
--- a/projects/editor/src/app/dialog.service.ts
+++ b/projects/editor/src/app/dialog.service.ts
@@ -2,6 +2,7 @@
import { Component, Inject, Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import { AngularEditorConfig } from '@kolkov/angular-editor';
@Injectable({
providedIn: 'root'
@@ -32,6 +33,22 @@ export class DialogService {
}
return dialogRef.afterClosed();
}
+
+ showRichTextEditDialog(text: string): Observable<string> {
+ const dialogRef = this.dialog.open(RichTextEditDialog, {
+ width: '700px',
+ height: '600px',
+ data: {
+ text: text,
+ editorConfig: {
+ editable: true,
+ minHeight: '350px',
+ toolbarHiddenButtons: [[], ['insertImage', 'insertVideo']]
+ }
+ }
+ });
+ return dialogRef.afterClosed();
+ }
}
@Component({
@@ -86,3 +103,19 @@ export class TextEditDialog {
export class MultilineTextEditDialog {
constructor(@Inject(MAT_DIALOG_DATA) public data: { oldText: string }) { }
}
+
+@Component({
+ selector: 'app-rich-text-edit-dialog',
+ template: `
+ <mat-dialog-content>
+ <angular-editor [(ngModel)]="data.text" [config]="data.editorConfig"></angular-editor>
+ </mat-dialog-content>
+ <mat-dialog-actions>
+ <button mat-button [mat-dialog-close]="data.text">Okay</button>
+ <button mat-button mat-dialog-close>Abbruch</button>
+ </mat-dialog-actions>
+ `
+})
+export class RichTextEditDialog {
+ constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string, editorConfig: AngularEditorConfig }) { }
+}
diff --git a/projects/editor/src/app/unit.service.ts b/projects/editor/src/app/unit.service.ts
index 042b58853435045443dc0559ea41ae95045b3d93..4b21f4a05f0c65aa78bb194ef26a42c29cba6284 100644
--- a/projects/editor/src/app/unit.service.ts
+++ b/projects/editor/src/app/unit.service.ts
@@ -270,7 +270,7 @@ export class UnitService {
});
break;
case 'text':
- this.dialogService.showTextEditDialog((element as any).text, true).subscribe((result: string) => {
+ this.dialogService.showRichTextEditDialog((element as any).text).subscribe((result: string) => {
if (result) {
this.updateElementProperty([element], 'text', result);
}