New dashboard look & feel

[src/xds/xds-agent.git] / webapp / src / app / @theme / components / tiny-mce / tiny-mce.component.ts

diff --git a/webapp/src/app/@theme/components/tiny-mce/tiny-mce.component.ts b/webapp/src/app/@theme/components/tiny-mce/tiny-mce.component.ts
new file mode 100644 (file)
index 0000000..c54685b
--- /dev/null
+++ b/webapp/src/app/@theme/components/tiny-mce/tiny-mce.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnDestroy, AfterViewInit, Output, EventEmitter, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'ngx-tiny-mce',
+  template: '',
+})
+export class TinyMCEComponent implements OnDestroy, AfterViewInit {
+
+  @Output() editorKeyup = new EventEmitter<any>();
+
+  editor: any;
+
+  constructor(private host: ElementRef) { }
+
+  ngAfterViewInit() {
+    tinymce.init({
+      target: this.host.nativeElement,
+      plugins: ['link', 'paste', 'table'],
+      skin_url: 'assets/skins/lightgray',
+      setup: editor => {
+        this.editor = editor;
+        editor.on('keyup', () => {
+          this.editorKeyup.emit(editor.getContent());
+        });
+      },
+      height: '320',
+    });
+  }
+
+  ngOnDestroy() {
+    tinymce.remove(this.editor);
+  }
+}