rich-text-editor.component.html

<div class="editor-control-line" fxLayout="row">
  <div class="editor-button-formfield-align">
    <button mat-icon-button matTooltip="Fett" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
            [class.active]="editor.isActive('bold')"
            (click)="toggleBold()">
      <mat-icon>format_bold</mat-icon>
    </button>
    <button mat-icon-button matTooltip="Kursiv" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
            [class.active]="editor.isActive('italic')"
            (click)="toggleItalic()">
      <mat-icon>format_italic</mat-icon>
    </button>
    <button mat-icon-button matTooltip="Unterstrichen" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
            [class.active]="editor.isActive('underline')"
            (click)="toggleUnderline()" style="text-decoration: underline">
      <mat-icon>format_underlined</mat-icon>
    </button>
    <button mat-icon-button matTooltip="Hochgestellt" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
            [class.active]="editor.isActive('superscript')"
            (click)="toggleSuperscript()">
      <mat-icon>superscript</mat-icon>
    </button>
    <button mat-icon-button matTooltip="Tiefgestellt" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
            [class.active]="editor.isActive('subscript')"
            (click)="toggleSubscript()">
      <mat-icon>subscript</mat-icon>
    </button>
    <button mat-icon-button matTooltip="Durchgestrichen" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
            [class.active]="editor.isActive('strike')"
            (click)="toggleStrike()">
      <mat-icon>strikethrough_s</mat-icon>
    </button>
  </div>
  <div>
    <mat-form-field>
      <mat-label>Schriftgröße</mat-label>
      <mat-select [value]="editor.getAttributes('textStyle').fontSize?.toString() || ''"
                  (valueChange)="applyFontSize($event)">
        <mat-option value="8">8px</mat-option>
        <mat-option value="14">14px</mat-option>
        <mat-option value="16">16px</mat-option>
        <mat-option value="18">18px</mat-option>
        <mat-option value="24">24px</mat-option>
        <mat-option value="36">36px</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field>
      <mat-label>Textfarbe</mat-label>
      <input matInput type="color"
             [value]="editor.getAttributes('textStyle').color"
             (input)="applyColor($any($event.target).value)">
    </mat-form-field>
    <mat-form-field>
      <mat-label>Hintergrundfarbe</mat-label>
      <input matInput type="color"
             [value]="editor.getAttributes('highlight').color"
             (input)="applyHighlight($any($event.target).value)">
    </mat-form-field>
  </div>
</div>
<div class="editor-button-formfield-align" fxLayout="row" fxLayoutAlign="space-between">
  <div>
    <button mat-icon-button matTooltip="Linksbündig" [matTooltipShowDelay]="300"
            [class.active]="editor.isActive({ textAlign: 'left' })"
            (click)="alignText('left')">
      <mat-icon>format_align_left</mat-icon>
    </button>
    <button mat-icon-button matTooltip="Rechtsbündig" [matTooltipShowDelay]="300"
            [class.active]="editor.isActive({ textAlign: 'right' })"
            (click)="alignText('right')">
      <mat-icon>format_align_right</mat-icon>
    </button>
    <button mat-icon-button matTooltip="Zentriert" [matTooltipShowDelay]="300"
            [class.active]="editor.isActive({ textAlign: 'center' })"
            (click)="alignText('center')">
      <mat-icon>format_align_center</mat-icon>
    </button>
    <button mat-icon-button matTooltip="Blocksatz" [matTooltipShowDelay]="300"
            [class.active]="editor.isActive({ textAlign: 'justify' })"
            (click)="alignText('justify')">
      <mat-icon>format_align_justify</mat-icon>
    </button>
  </div>
  <div>
    <button mat-icon-button matTooltip="Einrücken" [matTooltipShowDelay]="300"
            (click)="indent()">
      <mat-icon>format_indent_increase</mat-icon>
    </button>
    <button mat-icon-button matTooltip="Einrückung verringern" [matTooltipShowDelay]="300"
            (click)="outdent()">
      <mat-icon>format_indent_decrease</mat-icon>
    </button>
  </div>
  <div>
    <button mat-icon-button matTooltip="Aufzählung" [matTooltipShowDelay]="300"
            [class.active]="editor.isActive('bulletList')"
            (click)="toggleBulletList()">
      <mat-icon>format_list_bulleted</mat-icon>
    </button>
    <button mat-icon-button matTooltip="Aufzählung (nummeriert)" [matTooltipShowDelay]="300"
            [class.active]="editor.isActive('orderedList')"
            (click)="togleOrderedList()">
      <mat-icon>format_list_numbered</mat-icon>
    </button>
  </div>
  <button mat-icon-button matTooltip="Sonderzeichen" [matTooltipShowDelay]="300"
          [matMenuTriggerFor]="specialCharsMenu">
    <mat-icon>emoji_symbols</mat-icon>
  </button>
  <mat-menu #specialCharsMenu="matMenu" yPosition="above">
    <button mat-button (click)="insertSpecialChar('&female;')">&female;</button>
    <button mat-button (click)="insertSpecialChar('&male;')">&male;</button>
    <button mat-button (click)="insertSpecialChar('&micro;')">&micro;</button>
    <br>
    <button mat-button (click)="insertSpecialChar('&ccedil;')">&ccedil;</button>
    <button mat-button (click)="insertSpecialChar('&Ccedil;')">&Ccedil;</button>
    <button mat-button (click)="insertSpecialChar('&AElig;')">&AElig;</button>
    <br>
    <button mat-button (click)="insertSpecialChar('&lsaquo;')">&lsaquo;</button>
    <button mat-button (click)="insertSpecialChar('&rsaquo;')">&rsaquo;</button>
    <button mat-button (click)="insertSpecialChar('&laquo;')">&laquo;</button>
    <button mat-button (click)="insertSpecialChar('&raquo;')">&raquo;</button>
    <br>
    <button mat-button (click)="insertSpecialChar('&cent;')">&cent;</button>
    <button mat-button (click)="insertSpecialChar('&pound;')">&pound;</button>
    <button mat-button (click)="insertSpecialChar('&yen;')">&yen;</button>
    <br>
    <button mat-button (click)="insertSpecialChar('&copy;')">&copy;</button>
    <button mat-button (click)="insertSpecialChar('&reg;')">&reg;</button>
    <button mat-button (click)="insertSpecialChar('&trade;')">&trade;</button>
    <br>
    <button mat-button (click)="insertSpecialChar('&le;')">&le;</button>
    <button mat-button (click)="insertSpecialChar('&ge;')">&ge;</button>
    <button mat-button (click)="insertSpecialChar('&fpartint;')">&fpartint;</button>
    <button mat-button (click)="insertSpecialChar('&sum;')">&sum;</button>
    <button mat-button (click)="insertSpecialChar('&isin;')">&isin;</button>
    <button mat-button (click)="insertSpecialChar('&notin;')">&notin;</button>
    <button mat-button (click)="insertSpecialChar('&radic;')">&radic;</button>
    <button mat-button (click)="insertSpecialChar('&infin;')">&infin;</button>
    <br>
    <button mat-button (click)="insertSpecialChar('&spades;')">&spades;</button>
    <button mat-button (click)="insertSpecialChar('&clubs;')">&clubs;</button>
    <button mat-button (click)="insertSpecialChar('&hearts;')">&hearts;</button>
    <button mat-button (click)="insertSpecialChar('&diams;')">&diams;</button>
  </mat-menu>
  <mat-form-field>
    <mat-label>Überschrift</mat-label>
    <mat-select [value]="editor.getAttributes('heading').level?.toString() || ''"
                (valueChange)="toggleHeading($event)">
      <mat-option value="1">H1</mat-option>
      <mat-option value="2">H2</mat-option>
      <mat-option value="3">H3</mat-option>
      <mat-option value="4">H4</mat-option>
      <mat-option value="">Paragraph</mat-option>
    </mat-select>
  </mat-form-field>
  <button mat-icon-button [matMenuTriggerFor]="optionsMenu">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #optionsMenu="matMenu">
    <mat-form-field>
      <mat-label>Aufzählungszeichen</mat-label>
      <mat-select [value]="editor.getAttributes('bulletList').listStyle"
                  (click)="$any($event).stopPropagation()"
                  (valueChange)="applyListStyle('bulletList', $event)">
        <mat-option value="disc">disc</mat-option>
        <mat-option value="circle">circle</mat-option>
        <mat-option value="square">square</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field>
      <mat-label>Aufzählungsnummerierung</mat-label>
      <mat-select [value]="editor.getAttributes('orderedList').listStyle"
                  (click)="$any($event).stopPropagation()"
                  (valueChange)="applyListStyle('orderedList', $event)">
        <mat-option value="decimal">decimal</mat-option>
        <mat-option value="lower-latin">lower-latin</mat-option>
        <mat-option value="upper-latin">upper-latin</mat-option>
        <mat-option value="lower-roman">lower-roman</mat-option>
        <mat-option value="upper-roman">upper-roman</mat-option>
        <mat-option value="lower-greek">lower-greek</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field>
      <mat-label>Absatzabstand</mat-label>
      <mat-select matTooltip="Achtung: Gilt nur für zukünftig angelegte Absätze" [matTooltipShowDelay]="300"
                  [value]="editor.getAttributes('paragraph').margin?.toString() || '0'"
                  (click)="$any($event).stopPropagation()" (valueChange)="applyParagraphStyle($event)">
        <mat-option value="0">0px</mat-option>
        <mat-option value="10">10px</mat-option>
        <mat-option value="20">20px</mat-option>
      </mat-select>
    </mat-form-field>
  </mat-menu>
</div>
<tiptap-editor [editor]="editor" [ngModel]="text" (ngModelChange)="textChange.emit($event)">
</tiptap-editor>