Initial editor functionality and data bindings
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
8a9f6d508e
commit
2291b99512
@ -1,66 +1,68 @@
|
|||||||
<div class="container"
|
<div class="container"
|
||||||
(focusin)="onFocusIn($event)"
|
(focusin)="onFocusIn($event)"
|
||||||
(focusout)="onFocusOut($event)">
|
(focusout)="onFocusIn($event)">
|
||||||
<div class="toolbar-base" *ngIf="isFocused">
|
<div class="toolbar-base" *ngIf="isFocused">
|
||||||
<div class="toolbar-button" title="Bold">
|
<button class="toolbar-button" title="Bold" (click)="documentCommand('bold')">
|
||||||
<i class="icon fa fa-bold"></i>
|
<i class="icon fa fa-bold"></i>
|
||||||
</div>
|
</button>
|
||||||
<div class="toolbar-button" title="Italic">
|
<button class="toolbar-button" title="Italic" (click)="documentCommand('italic')">
|
||||||
<i class="icon fa fa-italic"></i>
|
<i class="icon fa fa-italic"></i>
|
||||||
</div>
|
</button>
|
||||||
<div class="toolbar-button" title="Underline">
|
<button class="toolbar-button" title="Underline" (click)="documentCommand('underline')">
|
||||||
<i class="icon fa fa-underline"></i>
|
<i class="icon fa fa-underline"></i>
|
||||||
</div>
|
</button>
|
||||||
<div class="toolbar-button" title="Strikethrough">
|
<button class="toolbar-button" title="Strikethrough" (click)="documentCommand('strikeThrough')">
|
||||||
<i class="icon fa fa-strikethrough"></i>
|
<i class="icon fa fa-strikethrough"></i>
|
||||||
</div>
|
</button>
|
||||||
|
|
||||||
<div class="toolbar-sep"></div>
|
<div class="toolbar-sep"></div>
|
||||||
|
|
||||||
<div class="toolbar-button" title="Align Right">
|
<button class="toolbar-button" title="Align Left" (click)="documentCommand('justifyLeft')">
|
||||||
<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>
|
<i class="icon fa fa-align-left"></i>
|
||||||
</div>
|
</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>
|
<div class="toolbar-sep"></div>
|
||||||
|
|
||||||
<div class="toolbar-button" title="Undo">
|
<button class="toolbar-button" title="Undo" (click)="documentCommand('undo')">
|
||||||
<i class="icon fa fa-undo"></i>
|
<i class="icon fa fa-undo"></i>
|
||||||
</div>
|
</button>
|
||||||
<div class="toolbar-button" title="Redo">
|
<button class="toolbar-button" title="Redo" (click)="documentCommand('redo')">
|
||||||
<i class="icon fa fa-redo"></i>
|
<i class="icon fa fa-redo"></i>
|
||||||
</div>
|
</button>
|
||||||
|
|
||||||
<div class="toolbar-sep"></div>
|
<div class="toolbar-sep"></div>
|
||||||
|
|
||||||
<div class="toolbar-button" title="Increase Heading Level">
|
<button class="toolbar-button" title="Increase Heading Level">
|
||||||
<i class="icon fa fa-heading"></i>
|
<i class="icon fa fa-heading"></i>
|
||||||
<i class="icon fa fa-long-arrow-alt-up"></i>
|
<i class="icon fa fa-long-arrow-alt-up"></i>
|
||||||
</div>
|
</button>
|
||||||
<div class="toolbar-button" title="Decrease Heading Level">
|
<button class="toolbar-button" title="Decrease Heading Level">
|
||||||
<i class="icon fa fa-heading"></i>
|
<i class="icon fa fa-heading"></i>
|
||||||
<i class="icon fa fa-long-arrow-alt-down"></i>
|
<i class="icon fa fa-long-arrow-alt-down"></i>
|
||||||
</div>
|
</button>
|
||||||
<div class="toolbar-button" title="Format Monospace">
|
<button class="toolbar-button" title="Format Monospace">
|
||||||
<i class="icon fa fa-code"></i>
|
<i class="icon fa fa-code"></i>
|
||||||
</div>
|
</button>
|
||||||
|
|
||||||
<div class="toolbar-sep"></div>
|
<div class="toolbar-sep"></div>
|
||||||
|
|
||||||
<div class="toolbar-button" title="Begin Bulleted List">
|
<button class="toolbar-button" title="Begin Bulleted List">
|
||||||
<i class="icon fa fa-list-ul"></i>
|
<i class="icon fa fa-list-ul"></i>
|
||||||
</div>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="editable-base"
|
class="editable-base"
|
||||||
[ngClass]="isFocused ? 'focused' : ''"
|
[ngClass]="isFocused ? 'focused' : ''"
|
||||||
contenteditable
|
contenteditable
|
||||||
>
|
appDomChange
|
||||||
Content editable!
|
[innerHTML]="initialValue"
|
||||||
</div>
|
#editable
|
||||||
|
(domChange)="onContentsChanged($event)"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
@ -0,0 +1,9 @@
|
|||||||
|
import {NgModule} from '@angular/core';
|
||||||
|
import {DomChangeDirective} from './dom-change.directive';
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [],
|
||||||
|
exports: [DomChangeDirective],
|
||||||
|
declarations: [DomChangeDirective],
|
||||||
|
})
|
||||||
|
export class DirectivesModule {}
|
@ -0,0 +1,30 @@
|
|||||||
|
import {Directive, ElementRef, EventEmitter, OnDestroy, Output} from '@angular/core';
|
||||||
|
|
||||||
|
@Directive({
|
||||||
|
selector: '[appDomChange]'
|
||||||
|
})
|
||||||
|
export class DomChangeDirective implements OnDestroy {
|
||||||
|
private changes: MutationObserver;
|
||||||
|
|
||||||
|
@Output()
|
||||||
|
public domChange = new EventEmitter();
|
||||||
|
|
||||||
|
constructor(private elementRef: ElementRef) {
|
||||||
|
const element = this.elementRef.nativeElement;
|
||||||
|
|
||||||
|
this.changes = new MutationObserver((mutations) => {
|
||||||
|
mutations.forEach(mutation => this.domChange.emit(mutation));
|
||||||
|
});
|
||||||
|
|
||||||
|
this.changes.observe(element, {
|
||||||
|
attributes: true,
|
||||||
|
childList: true,
|
||||||
|
characterData: true,
|
||||||
|
subtree: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this.changes.disconnect();
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in new issue