Skip to content
Snippets Groups Projects
Commit 9e9f6550 authored by rhenck's avatar rhenck
Browse files

[editor] Add image functionality to TextEditor

Images are always inline and scaled down to the font size of the text 
element as a whole.
parent 2bb918b9
No related branches found
No related tags found
No related merge requests found
......@@ -233,6 +233,10 @@
<button mat-button (click)="insertSpecialChar('&hearts;')">&hearts;</button>
<button mat-button (click)="insertSpecialChar('&diams;')">&diams;</button>
</mat-menu>
<button mat-icon-button matTooltip="Bild" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
(click)="addImage()">
<mat-icon>image</mat-icon>
</button>
</div>
<div *ngIf="showCloseElements" fxLayout="row" fxLayoutAlign="space-around center" >
<button mat-icon-button matTooltip="\i" [matTooltipShowDelay]="300"
......
......@@ -12,12 +12,14 @@ import { Color } from '@tiptap/extension-color';
import { Highlight } from '@tiptap/extension-highlight';
import { TextAlign } from '@tiptap/extension-text-align';
import { Heading } from '@tiptap/extension-heading';
import { Image } from '@tiptap/extension-image';
import { Indent } from './indent';
import { HangingIndent } from './hanging-indent';
import { customParagraph } from './paragraph-extension';
import { fontSizeExtension } from './font-size-extension';
import { bulletListExtension } from './bulletList-extension';
import { orderedListExtension } from './orderedList-extension';
import { FileService } from '../services/file.service';
@Component({
selector: 'app-rich-text-editor',
......@@ -60,6 +62,12 @@ export class RichTextEditorComponent implements AfterViewInit {
bulletListExtension,
orderedListExtension,
HangingIndent
Image.configure({
inline: true,
HTMLAttributes: {
style: 'display: inline-block; height: 1em; vertical-align: middle'
}
}),
]
});
......@@ -167,4 +175,9 @@ export class RichTextEditorComponent implements AfterViewInit {
this.editor.commands.outdent(this.selectedIndentSize);
this.editor.commands.unhangIndent(this.selectedIndentSize);
}
async addImage(): Promise<void> {
const mediaSrc = await FileService.loadImage();
this.editor.commands.setImage({ src: mediaSrc });
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment