WIP

src/app/games/massive-darkness2/md2-html-editor/md2-html-editor.component.html

@@ -0,0 +1 @@
+<editor [init]="htmlEditorSetting"></editor>

src/app/games/massive-darkness2/md2-html-editor/md2-html-editor.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MD2HtmlEditorComponent } from './md2-html-editor.component';
+
+describe('MD2HtmlEditorComponent', () => {
+  let component: MD2HtmlEditorComponent;
+  let fixture: ComponentFixture<MD2HtmlEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MD2HtmlEditorComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(MD2HtmlEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/games/massive-darkness2/md2-html-editor/md2-html-editor.component.ts

@@ -0,0 +1,109 @@
+import { Component, ElementRef, EventEmitter, Input, Output, Renderer2 } from '@angular/core';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+import { Editor, RawEditorOptions } from 'tinymce';
+import { MsgBoxService } from '../../../services/msg-box.service';
+import { DropDownOption } from '../../../entity/dropDownOption';
+import { MD2Icon } from '../massive-darkness2.model';
+import { first } from 'rxjs/operators';
+
+@Component({
+  selector: 'md2-html-editor',
+  templateUrl: './md2-html-editor.component.html',
+  styleUrl: './md2-html-editor.component.scss'
+})
+export class MD2HtmlEditorComponent implements ControlValueAccessor, Validator {
+
+  private _lastBlurValue: string;
+
+  readonly: boolean = false;
+  isRequired: boolean = false;
+
+  @Input() id? = '';
+  @Input() name = '';
+  @Input() data: string;
+
+  @Output() focus = new EventEmitter();
+  @Output() blur = new EventEmitter<string>();
+
+  @Input('readonly')
+  public set input_readonly(value) {
+    this.readonly = typeof value !== 'undefined' && value !== false;
+  }
+  @Input('isRequired')
+  public set input_isRequired(value) {
+    this.isRequired = typeof value !== 'undefined' && value !== false;
+  }
+
+  constructor(
+    private msgBoxService: MsgBoxService,
+    private elementRef: ElementRef,
+    private renderer: Renderer2) {
+    this.htmlEditorSetting.base_url = '/tinymce';
+    this.htmlEditorSetting.suffix = '.min';
+    this.htmlEditorSetting['parentComponent'] = this;
+    this.htmlEditorSetting.plugins = 'lists link image table code';
+    this.htmlEditorSetting.toolbar2 = 'customInsertButton'
+    this.htmlEditorSetting.setup = this.htmlEditorSetup;
+  }
+
+  htmlEditorSetting: RawEditorOptions = {};
+
+  htmlEditorSetup(editor: Editor) {
+    let component = this.htmlEditorSetting['parentComponent'] as MD2HtmlEditorComponent;
+
+
+    editor.ui.registry.addButton('customInsertButton', {
+      icon: 'code-sample',
+      text: 'MD2 Icon',
+      onAction: (_) => component.showInsertMD2Icon(editor)
+    });
+  }
+  showInsertMD2Icon(editor: Editor) {
+
+    var iconKeys = Object.keys(MD2Icon);
+    iconKeys = iconKeys.slice(iconKeys.length / 2, iconKeys.length - 1);
+
+    this.msgBoxService.showInputbox('Insert MD2 Icon', '', { inputType: 'dropdown', dropDownOptions: iconKeys.map(k => new DropDownOption(k, k)) })
+      .pipe(first()).subscribe(result => {
+
+        editor.insertContent(`&nbsp;<strong>${result}</strong>&nbsp;`);
+        this.writeValue(editor.getContent());
+      });
+  }
+
+  validate(control: AbstractControl): ValidationErrors {
+    // if (this.required && (this.value == null || this.value == 0)) {
+    //   return { 'currency': '' };
+    // }
+    return null;
+  }
+  registerOnValidatorChange?(fn: () => void): void {
+  }
+  onChange = (value: number) => { };
+  onTouched = () => { };
+  writeValue(obj: string): void {
+    this.data = obj;
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.readonly = isDisabled;
+  }
+
+  ngOnInit() {
+  }
+
+  ngAfterViewInit() {
+    this.renderer.removeAttribute(this.elementRef.nativeElement, 'id')
+  }
+  onBlur() {
+    if (this._lastBlurValue != this.data) {
+      this._lastBlurValue = this.data;
+      this.blur.emit(this.data);
+    }
+  }
+}