83 lines
3.4 KiB
HTML
83 lines
3.4 KiB
HTML
<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]="initialValue"
|
|
#editable
|
|
(domChange)="onContentsChanged($event)"
|
|
></div>
|
|
<div
|
|
class="editable-base"
|
|
*ngIf="!isFocused"
|
|
[innerHTML]="initialValue"
|
|
></div>
|
|
</div> |