66 lines
2.1 KiB
HTML
66 lines
2.1 KiB
HTML
|
<div class="container"
|
||
|
|
(focusin)="onFocusIn($event)"
|
||
|
|
(focusout)="onFocusOut($event)">
|
||
|
|
<div class="toolbar-base" *ngIf="isFocused">
|
||
|
|
<div class="toolbar-button" title="Bold">
|
||
|
|
<i class="icon fa fa-bold"></i>
|
||
|
|
</div>
|
||
|
|
<div class="toolbar-button" title="Italic">
|
||
|
|
<i class="icon fa fa-italic"></i>
|
||
|
|
</div>
|
||
|
|
<div class="toolbar-button" title="Underline">
|
||
|
|
<i class="icon fa fa-underline"></i>
|
||
|
|
</div>
|
||
|
|
<div class="toolbar-button" title="Strikethrough">
|
||
|
|
<i class="icon fa fa-strikethrough"></i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="toolbar-sep"></div>
|
||
|
|
|
||
|
|
<div class="toolbar-button" title="Align Right">
|
||
|
|
<i class="icon fa fa-align-right"></i>
|
||
|
|
</div>
|
||
|
|
<div class="toolbar-button" title="Align Center">
|
||
|
|
<i class="icon fa fa-align-center"></i>
|
||
|
|
</div>
|
||
|
|
<div class="toolbar-button" title="Align Left">
|
||
|
|
<i class="icon fa fa-align-left"></i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="toolbar-sep"></div>
|
||
|
|
|
||
|
|
<div class="toolbar-button" title="Undo">
|
||
|
|
<i class="icon fa fa-undo"></i>
|
||
|
|
</div>
|
||
|
|
<div class="toolbar-button" title="Redo">
|
||
|
|
<i class="icon fa fa-redo"></i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="toolbar-sep"></div>
|
||
|
|
|
||
|
|
<div class="toolbar-button" title="Increase Heading Level">
|
||
|
|
<i class="icon fa fa-heading"></i>
|
||
|
|
<i class="icon fa fa-long-arrow-alt-up"></i>
|
||
|
|
</div>
|
||
|
|
<div class="toolbar-button" title="Decrease Heading Level">
|
||
|
|
<i class="icon fa fa-heading"></i>
|
||
|
|
<i class="icon fa fa-long-arrow-alt-down"></i>
|
||
|
|
</div>
|
||
|
|
<div class="toolbar-button" title="Format Monospace">
|
||
|
|
<i class="icon fa fa-code"></i>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="toolbar-sep"></div>
|
||
|
|
|
||
|
|
<div class="toolbar-button" title="Begin Bulleted List">
|
||
|
|
<i class="icon fa fa-list-ul"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="editable-base"
|
||
|
|
[ngClass]="isFocused ? 'focused' : ''"
|
||
|
|
contenteditable
|
||
|
|
>
|
||
|
|
Content editable!
|
||
|
|
</div>
|
||
|
|
</div>
|