You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
frontend/src/app/components/wysiwyg/wysiwyg.component.html

83 lines
3.5 KiB

<div [ngClass]="isDark() ? 'container dark' : 'container'"
(dblclick)="onFocusIn($event)">
<div class="toolbar-base" *ngIf="isFocused">
<button class="toolbar-button" title="Bold" (click)="documentCommand('bold')">
<i class="icon fa fa-bold"></i>
</button>
<button class="toolbar-button" title="Italic" (click)="documentCommand('italic')">
<i class="icon fa fa-italic"></i>
</button>
<button class="toolbar-button" title="Underline" (click)="documentCommand('underline')">
<i class="icon fa fa-underline"></i>
</button>
<button class="toolbar-button" title="Strikethrough" (click)="documentCommand('strikeThrough')">
<i class="icon fa fa-strikethrough"></i>
</button>
<div class="toolbar-sep"></div>
<button class="toolbar-button" title="Align Left" (click)="documentCommand('justifyLeft')">
<i class="icon fa fa-align-left"></i>
</button>
<button class="toolbar-button" title="Align Center" (click)="documentCommand('justifyCenter')">
<i class="icon fa fa-align-center"></i>
</button>
<button class="toolbar-button" title="Align Right" (click)="documentCommand('justifyRight')">
<i class="icon fa fa-align-right"></i>
</button>
<div class="toolbar-sep"></div>
<button class="toolbar-button" title="Undo" (click)="documentCommand('undo')">
<i class="icon fa fa-undo"></i>
</button>
<button class="toolbar-button" title="Redo" (click)="documentCommand('redo')">
<i class="icon fa fa-redo"></i>
</button>
<div class="toolbar-sep"></div>
<button class="toolbar-button" title="Make text bigger" (click)="documentCommand('increaseFontSize')">
<i class="icon fa fa-font"></i>
<i class="icon fa fa-long-arrow-alt-up"></i>
</button>
<button class="toolbar-button" title="Make text smaller" (click)="documentCommand('decreaseFontSize')">
<i class="icon fa fa-font"></i>
<i class="icon fa fa-long-arrow-alt-down"></i>
</button>
<button class="toolbar-button" title="Make text superscript" (click)="documentCommand('superscript')">
<i class="icon fa fa-superscript"></i>
</button>
<button class="toolbar-button" title="Make text subscript" (click)="documentCommand('subscript')">
<i class="icon fa fa-subscript"></i>
</button>
<div class="toolbar-sep"></div>
<button class="toolbar-button" title="Insert unordered list" (click)="documentCommand('insertUnorderedList')">
<i class="icon fa fa-list-ul"></i>
</button>
<button class="toolbar-button" title="Insert ordered list" (click)="documentCommand('insertOrderedList')">
<i class="icon fa fa-list-ol"></i>
</button>
<button class="toolbar-button" title="Insert horizontal rule" (click)="documentCommand('insertHorizontalRule')">
</button>
</div>
<div
class="editable-base"
[ngClass]="isFocused ? 'focused' : ''"
contenteditable
appDomChange
*ngIf="isFocused"
[innerHTML]="contents"
#editable
(domChange)="onContentsChanged($event)"
></div>
<div
class="editable-base"
*ngIf="!isFocused"
[innerHTML]="displayContents"
></div>
</div>