rich-text-editor.component.html

<div fxLayout="column">
  <div class="editor-controls-first-line" fxLayout="row">
    <div fxLayout="row" class="button-group">
      <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>
    <mat-form-field class="font-size-dropdown">
      <mat-label>Schriftgröße</mat-label>
      <mat-select [value]="editor.getAttributes('textStyle').fontSize?.toString() || selectedFontSize">
        <mat-option (click)="applyFontSize('8px')" value="8px">8px</mat-option>
        <mat-option (click)="applyFontSize('10px')" value="10px">10px</mat-option>
        <mat-option (click)="applyFontSize('12px')" value="12px">12px</mat-option>
        <mat-option (click)="applyFontSize('14px')" value="14px">14px</mat-option>
        <mat-option (click)="applyFontSize('16px')" value="16px">16px</mat-option>
        <mat-option (click)="applyFontSize('18px')" value="18px">18px</mat-option>
        <mat-option (click)="applyFontSize('20px')" value="20px">20px</mat-option>
        <mat-option (click)="applyFontSize('22px')" value="22px">22px</mat-option>
        <mat-option (click)="applyFontSize('24px')" value="24px">24px</mat-option>
        <mat-option (click)="applyFontSize('26px')" value="26px">26px</mat-option>
        <mat-option (click)="applyFontSize('28px')" value="28px">28px</mat-option>
        <mat-option (click)="applyFontSize('30px')" value="30px">30px</mat-option>
        <mat-option (click)="applyFontSize('36px')" value="36px">36px</mat-option>
      </mat-select>
    </mat-form-field>
    <div class="combo-button" fxLayout="row"
         [style.background-color]="selectedFontColor">
      <button mat-icon-button matTooltip="Textfarbe"
              (click)="applyFontColor()">
        <mat-icon>format_color_text</mat-icon>
      </button>
      <mat-select (click)="textColorInput.click()"></mat-select>
      <input matInput type="color" #textColorInput hidden
             (input)="selectedFontColor = $any($event.target).value; applyFontColor()">
    </div>
    <div class="combo-button" fxLayout="row"
         [style.background-color]="selectedHighlightColor">
      <button mat-icon-button matTooltip="Texthintergrund"
              (click)="applyHighlightColor()">
        <mat-icon>format_color_fill</mat-icon>
      </button>
      <mat-select (click)="textHighlightColorInput.click()"></mat-select>
      <input matInput type="color" #textHighlightColorInput hidden
             (input)="selectedHighlightColor = $any($event.target).value; applyHighlightColor()">
    </div>
    <mat-form-field>
      <mat-label>Absatztyp</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>
    <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>
  </div>

  <div class="editor-controls-second-line" fxLayout="row">
    <div class="button-group" fxLayout="row">
      <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 class="button-group" fxLayout="row">
      <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>
      <button mat-icon-button matTooltip="Hängende Einrückung" [matTooltipShowDelay]="300"
              (click)="hangIndent()">
        <mat-icon>segment</mat-icon>
      </button>
      <button mat-icon-button matTooltip="Hängende Einrückung entfernen" [matTooltipShowDelay]="300"
              (click)="unhangIndent()">
        <mat-icon>view_headline</mat-icon>
      </button>
      <mat-form-field class="indent-size-input" appearance="fill">
        <mat-label>Einrücktiefe</mat-label>
        <input matInput type="text" [(ngModel)]="selectedIndentSize">
      </mat-form-field>
    </div>
    <div fxLayout="row">
      <div class="combo-button" fxLayout="row" [style.background-color]="editor.isActive('bulletList') ? 'lightgrey' : ''">
        <button mat-icon-button matTooltip="Aufzählung" [matTooltipShowDelay]="300"
                [class.active]="editor.isActive('bulletList')"
                (click)="toggleBulletList()">
          <mat-icon>format_list_bulleted</mat-icon>
        </button>
          <mat-select [value]="editor.getAttributes('bulletList').listStyle"
                      (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>
      </div>
      <div class="combo-button" fxLayout="row" [style.background-color]="editor.isActive('orderedList') ? 'lightgrey' : ''">
        <button mat-icon-button matTooltip="Aufzählung (nummeriert)" [matTooltipShowDelay]="300"
                [class.active]="editor.isActive('orderedList')"
                (click)="toggleOrderedList()">
          <mat-icon>format_list_numbered</mat-icon>
        </button>
          <mat-select [value]="editor.getAttributes('orderedList').listStyle"
                      (valueChange)="applyListStyle('orderedList', $event)">
            <mat-option value="decimal"
                        (click)="applyListStyle('orderedList', 'decimal')">
              decimal
            </mat-option>
            <mat-option value="lower-latin"
                        (click)="applyListStyle('orderedList', 'lower-latin')">
              lower-latin
            </mat-option>

            <mat-option value="upper-latin"
                        (click)="applyListStyle('orderedList', 'upper-latin')">
              upper-latin
            </mat-option>
            <mat-option value="lower-roman"
                        (click)="applyListStyle('orderedList', 'lower-roman')">
              lower-roman
            </mat-option>
            <mat-option value="upper-roman"
                        (click)="applyListStyle('orderedList', 'upper-roman')">
              upper-roman
            </mat-option>
            <mat-option value="lower-greek"
                        (click)="applyListStyle('orderedList', 'lower-greek')">
              lower-greek
            </mat-option>
          </mat-select>
      </div>
    </div>
    <button mat-icon-button class="special-chars-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('&nbsp;')"
              [matTooltip]="'Geschütztes Leerzeichen'">&blank;</button>
      <button mat-button (click)="insertSpecialChar('&rsquo;')">&rsquo;</button>
      <button mat-button (click)="insertSpecialChar('&bdquo;')">&bdquo;</button>
      <button mat-button (click)="insertSpecialChar('&ldquo;')">&ldquo;</button>
      <button mat-button (click)="insertSpecialChar('&#8212;')">&#8212;</button>
      <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>
    <button mat-icon-button matTooltip="Bild" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
            (click)="addImage()">
      <mat-icon>image</mat-icon>
    </button>
    <button mat-icon-button matTooltip="Zitat" [matTooltipPosition]="'above'" [matTooltipShowDelay]="300"
            [class.active]="editor.isActive('blockquote')"
            (click)="toggleBlockquote()">
      <mat-icon>format_quote</mat-icon>
    </button>
  </div>
  <div *ngIf="clozeMode" fxLayout="row" fxLayoutAlign="space-around center" >
    <button mat-icon-button matTooltip="Eingabefeld" [matTooltipShowDelay]="300"
            (click)="insertTextField()">
      <mat-icon>text_fields</mat-icon>
    </button>
    <button mat-icon-button matTooltip="Ablegefeld" [matTooltipShowDelay]="300"
            (click)="insertDropList()">
      <mat-icon>drag_indicator</mat-icon>
    </button>
    <button mat-icon-button matTooltip="Optionsfeld" [matTooltipShowDelay]="300"
            (click)="insertToggleButton()">
      <mat-icon>radio_button_checked</mat-icon>
    </button>
  </div>
</div>
<tiptap-editor [editor]="editor" [ngModel]="content"
               [outputFormat]="clozeMode ? 'json' : 'html'"
               [style.font-size.px]="defaultFontSize"
               (ngModelChange)="contentChange.emit($event)">
</tiptap-editor>