WIP

angular.json

@@ -24,8 +24,8 @@
               "src/web.config",
               {
                 "glob": "**/*",
-                "input": "node_modules/leaflet/dist/images",
+                "input": "node_modules/tinymce",
-                "output": "/assets/img/markers"
+                "output": "/tinymce/"
               }
             ],
             "styles": [
@@ -44,10 +44,6 @@
             "scripts": [
               "node_modules/pace-js/pace.min.js",
               "node_modules/tinymce/tinymce.min.js",
-              "node_modules/tinymce/themes/modern/theme.min.js",
-              "node_modules/tinymce/plugins/link/plugin.min.js",
-              "node_modules/tinymce/plugins/paste/plugin.min.js",
-              "node_modules/tinymce/plugins/table/plugin.min.js",
               "node_modules/echarts/dist/echarts.min.js",
               "node_modules/echarts/dist/extension/bmap.min.js",
               "node_modules/chart.js/dist/Chart.min.js"
@@ -121,10 +117,6 @@
             "scripts": [
               "node_modules/pace-js/pace.min.js",
               "node_modules/tinymce/tinymce.min.js",
-              "node_modules/tinymce/themes/modern/theme.min.js",
-              "node_modules/tinymce/plugins/link/plugin.min.js",
-              "node_modules/tinymce/plugins/paste/plugin.min.js",
-              "node_modules/tinymce/plugins/table/plugin.min.js",
               "node_modules/echarts/dist/echarts.min.js",
               "node_modules/echarts/dist/extension/bmap.min.js",
               "node_modules/chart.js/dist/Chart.min.js"
@@ -147,27 +139,13 @@
               "src/web.config",
               {
                 "glob": "**/*",
-                "input": "node_modules/leaflet/dist/images",
+                "input": "node_modules/tinymce",
-                "output": "/assets/img/markers"
+                "output": "/tinymce/"
               }
             ]
           }
         }
       }
-    },
-    "ngx-admin-demo-e2e": {
-      "root": "",
-      "sourceRoot": "",
-      "projectType": "application",
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "./protractor.conf.js",
-            "devServerTarget": "ngx-admin-demo:serve"
-          }
-        }
-      }
     }
   },
   "schematics": {

package-lock.json

@@ -25,6 +25,7 @@
         "@nebular/eva-icons": "13.0.0",
         "@nebular/security": "13.0.0",
         "@nebular/theme": "13.0.0",
+        "@tinymce/tinymce-angular": "^7.0.0",
         "angular2-chartjs": "0.4.1",
         "angular2-qrcode": "^2.0.3",
         "bootstrap": "4.3.1",
@@ -50,7 +51,7 @@
         "rxjs-compat": "6.3.0",
         "socicon": "3.0.5",
         "style-loader": "^1.3.0",
-        "tinymce": "4.5.7",
+        "tinymce": "^7.0.0",
         "tslib": "^2.3.1",
         "typeface-exo": "0.0.22",
         "typeit": "^8.7.0",
@@ -4738,6 +4739,25 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/@tinymce/tinymce-angular": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@tinymce/tinymce-angular/-/tinymce-angular-7.0.0.tgz",
+      "integrity": "sha512-IKNaG/ihlxE1XCfq6lzULbnsqZO9KNJtlpu5jo6JDJDL9zcFzj/N2A16Kk7rTj1yfmDoB1IXAk/BpMOvgDY8cg==",
+      "dependencies": {
+        "tinymce": "^6.0.0 || ^5.5.0",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=14.0.0",
+        "@angular/core": ">=14.0.0",
+        "@angular/forms": ">=14.0.0"
+      }
+    },
+    "node_modules/@tinymce/tinymce-angular/node_modules/tinymce": {
+      "version": "6.8.3",
+      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-6.8.3.tgz",
+      "integrity": "sha512-3fCHKAeqT+xNwBVESf6iDbDV0VNwZNmfrkx9c/6Gz5iB8piMfaO6s7FvoiTrj1hf1gVbfyLTnz1DooI6DhgINQ=="
+    },
     "node_modules/@tufjs/canonical-json": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz",
@@ -21739,9 +21759,9 @@
       }
     },
     "node_modules/tinymce": {
-      "version": "4.5.7",
+      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-4.5.7.tgz",
+      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-7.0.0.tgz",
-      "integrity": "sha512-zniKbtjkm0zOnZ+6cG0xGeJCK85VP8cqQHISp9mUEMuG9zI/I3zmfwUPDhgR2PYUN/7bLaeC2f9/yz2j4r8OUA=="
+      "integrity": "sha512-ggXLfTRrUALAcjeJSRrZcJDOl6MgC2tPXe/zNOEkQXvTDgcKqFypPRoPpfpK5wejexjyaI/7dwETOntJ5MPBFg=="
     },
     "node_modules/tmp": {
       "version": "0.0.33",
@@ -27068,6 +27088,22 @@
         "@sigstore/protobuf-specs": "^0.3.1"
       }
     },
+    "@tinymce/tinymce-angular": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@tinymce/tinymce-angular/-/tinymce-angular-7.0.0.tgz",
+      "integrity": "sha512-IKNaG/ihlxE1XCfq6lzULbnsqZO9KNJtlpu5jo6JDJDL9zcFzj/N2A16Kk7rTj1yfmDoB1IXAk/BpMOvgDY8cg==",
+      "requires": {
+        "tinymce": "^6.0.0 || ^5.5.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "tinymce": {
+          "version": "6.8.3",
+          "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-6.8.3.tgz",
+          "integrity": "sha512-3fCHKAeqT+xNwBVESf6iDbDV0VNwZNmfrkx9c/6Gz5iB8piMfaO6s7FvoiTrj1hf1gVbfyLTnz1DooI6DhgINQ=="
+        }
+      }
+    },
     "@tufjs/canonical-json": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz",
@@ -40261,9 +40297,9 @@
       "dev": true
     },
     "tinymce": {
-      "version": "4.5.7",
+      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-4.5.7.tgz",
+      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-7.0.0.tgz",
-      "integrity": "sha512-zniKbtjkm0zOnZ+6cG0xGeJCK85VP8cqQHISp9mUEMuG9zI/I3zmfwUPDhgR2PYUN/7bLaeC2f9/yz2j4r8OUA=="
+      "integrity": "sha512-ggXLfTRrUALAcjeJSRrZcJDOl6MgC2tPXe/zNOEkQXvTDgcKqFypPRoPpfpK5wejexjyaI/7dwETOntJ5MPBFg=="
     },
     "tmp": {
       "version": "0.0.33",

package.json

@@ -12,7 +12,7 @@
   "scripts": {
     "ng": "ng",
     "conventional-changelog": "conventional-changelog",
-    "start": "ng serve",
+    "start": "ng serve --host=127.0.0.1",
     "build": "ng build --output-path \\\\ArkNAS\\docker\\nginx-proxy\\data\\ChurchAngular --configuration production",
     "build:prod": "npm run build -- --configuration production --aot",
     "test": "ng test",
@@ -45,6 +45,7 @@
     "@nebular/eva-icons": "13.0.0",
     "@nebular/security": "13.0.0",
     "@nebular/theme": "13.0.0",
+    "@tinymce/tinymce-angular": "^7.0.0",
     "angular2-chartjs": "0.4.1",
     "angular2-qrcode": "^2.0.3",
     "bootstrap": "4.3.1",
@@ -70,7 +71,7 @@
     "rxjs-compat": "6.3.0",
     "socicon": "3.0.5",
     "style-loader": "^1.3.0",
-    "tinymce": "4.5.7",
+    "tinymce": "^7.0.0",
     "tslib": "^2.3.1",
     "typeface-exo": "0.0.22",
     "typeit": "^8.7.0",

src/app/games/games.module.ts

@@ -32,6 +32,9 @@ import { MobAttackInfoComponent } from './massive-darkness2/mobs/mob-detail-info
 import { MobDefInfoComponent } from './massive-darkness2/mobs/mob-detail-info/mob-def-info/mob-def-info.component';
 import { MobCombatInfoComponent } from './massive-darkness2/mobs/mob-detail-info/mob-combat-info/mob-combat-info.component';
 import { MobStandInfoComponent } from './massive-darkness2/mobs/mob-stand-info/mob-stand-info.component';
+import { HtmlEditorModule } from '../ui/html-editor/html-editor.module';
+import { EditorModule } from '@tinymce/tinymce-angular';
+import { MD2HtmlEditorComponent } from './massive-darkness2/md2-html-editor/md2-html-editor.component';
 
 
 @NgModule({
@@ -59,7 +62,8 @@ import { MobStandInfoComponent } from './massive-darkness2/mobs/mob-stand-info/m
     MobAttackInfoComponent,
     MobDefInfoComponent,
     MobCombatInfoComponent,
-    MobStandInfoComponent
+    MobStandInfoComponent,
+    MD2HtmlEditorComponent
   ],
   imports: [
     CommonModule,
@@ -89,7 +93,9 @@ import { MobStandInfoComponent } from './massive-darkness2/mobs/mob-stand-info/m
     CurrencyInputModule,
     NbDialogModule.forRoot(),
     AlertDlgModule,
-    DropDownListModule
+    DropDownListModule,
+    HtmlEditorModule,
+    EditorModule
   ]
 })
 export class GamesModule { }

src/app/games/massive-darkness2/factorys/md2-clone.ts

@@ -8,6 +8,7 @@ export class MD2Clone {
         let cloneObj = null;
         switch (type) {
             case "TreasureItem":
+                //let copy = structuredClone(obj);
                 return new TreasureItem(obj['type'], 1);
                 break;
             case "MobInfo":

src/app/games/massive-darkness2/hero-dashboard/hero-dashboard.component.ts

@@ -83,7 +83,7 @@ export class HeroDashboardComponent extends MD2Base implements OnInit {
   }
 
   public get allowAttack(): boolean {
-    return this.hero.uiBossFight || (!!this.md2Service.mobs && this.md2Service.mobs.length > 0) || (!!this.md2Service.roamingMonsters && this.md2Service.roamingMonsters.length > 0);
+    return this.hero.uiBossFight || this.md2Service.mobs?.length > 0 || this.md2Service.roamingMonsters?.length > 0;
   }
 
   ngOnInit(): void {

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

@@ -11,6 +11,9 @@
             </nb-accordion-item>
         </nb-accordion>
     </div> -->
+    <div class="col-12">
+        <md2-html-editor></md2-html-editor>
+    </div>
 
     <div class="col-12 col-md-5">
         <nb-card>

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);
+    }
+  }
+}

src/app/providers/http-interceptors/apiPrefixInterceptor.ts

@@ -5,7 +5,6 @@ import { Observable } from 'rxjs';
 import { EMPTY } from 'rxjs';
 import { environment } from '../../../environments/environment';
 import { DateUtils } from '../../utilities/date-utils';
-
 @Injectable()
 export class ApiPrefixInterceptor implements HttpInterceptor {
   constructor(

src/app/ui/html-editor/html-editor.component.html

@@ -0,0 +1,4 @@
+<!-- <editor [init]="{
+base_url: '/tinymce',
+    suffix: '.min'    , height: 300    
+  }"></editor> -->

src/app/ui/html-editor/html-editor.component.spec.ts

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

src/app/ui/html-editor/html-editor.component.ts

@@ -0,0 +1,48 @@
+import { Component, ElementRef, EventEmitter, Inject, Input, NgZone, Output, PLATFORM_ID, Renderer2 } from '@angular/core';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+import { EditorComponent } from '@tinymce/tinymce-angular';
+import { HtmlEditorSettings } from './html-editor.model';
+
+@Component({
+  selector: 'my-html-editor',
+  templateUrl: './html-editor.component.html',
+  styleUrl: './html-editor.component.scss'
+})
+export class HtmlEditorComponent extends EditorComponent implements ControlValueAccessor {
+  private _elementRef2: ElementRef;
+
+  writeValue(value: string | null): void {
+
+    super.writeValue(value);
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    super.registerOnChange(fn);
+  }
+  registerOnTouched(fn: any): void {
+    super.registerOnTouched(fn);
+  }
+  setDisabledState(isDisabled: boolean): void {
+    super.setDisabledState(isDisabled);
+  }
+  constructor(elementRef: ElementRef, ngZone: NgZone, @Inject(PLATFORM_ID) platformId: Object) {
+    super(elementRef, ngZone, platformId);
+    // this.elementRef is private. Need a duplicate
+    this._elementRef2 = elementRef;
+  }
+
+  checkDomAttachment(): boolean {
+    // check if component has been attached to DOM yet
+    return document.body.contains(this._elementRef2.nativeElement);
+  }
+  ngAfterViewInit() {
+    this.init = new HtmlEditorSettings({});
+    super.ngAfterViewInit();
+  }
+  initialise: () => {}
+
+  private InitializeEditor() {
+    this.init = new HtmlEditorSettings({});
+    //super.initialise();
+  }
+}

src/app/ui/html-editor/html-editor.model.ts

@@ -0,0 +1,147 @@
+import { RawEditorOptions } from "tinymce";
+
+export class HtmlEditorSettings implements RawEditorOptions {
+    parentComponent?: any = null;
+    base_url?: string = '/tinymce';
+    suffix?: string = '.min';
+    menubar?: boolean = false;
+    inline?: boolean = false;
+    indent_use_margin? = false;
+    theme?: string = 'silver';
+    plugins?: string[] = [
+        'link',
+        'lists',
+        'autolink',
+        'noneditable',
+        'table',
+        'code',
+        'fullscreen'
+    ];
+    toolbar?: string[] = [
+        'undo redo | bold italic underline | fontselect fontsizeselect forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist outdent indent | code fullscreen'
+    ];
+    extraToolBar?: string;
+    fullscreen_native?: boolean = false;
+    statusbar?: boolean = false;
+    noneditable_editable_class?: string = 'editable';
+    noneditable_noneditable_class?: string = 'templateParameter';
+    autoresize_bottom_margin?: number = 2;
+    min_height?: number = 200;
+    height?: number | string;
+    content_style?: string =
+        '.parameterInput {  color:antiquewhite;  background:lightslategrey;  padding-left:5px;  padding-right:5px;  }' +
+        '.reportParameter {  color:antiquewhite;  background:slateblue;  padding-left:5px;  padding-right:5px;} ' +
+        '.parameterInput:empty:not(:focus):before { content: \' \' attr(data-name) \' (Empty)\'; }';
+
+    extended_valid_elements?: string = `parameter[id|style|class]`;
+
+
+    constructor(config: Partial<HtmlEditorSettings>) {
+
+        if (config.extraToolBar) {
+            this.toolbar[0] += ' ' + config.extraToolBar;
+        }
+        Object.assign(this, config);
+    }
+}
+
+export interface ITinyMceEditor {
+
+    // focus(skipFocus: Boolean);
+    // addCommand(name: String, callback: Function, scope: Object);
+    // hasPlugin(name: String, loaded: Boolean): Boolean;
+    // getDoc(): HTMLElement;
+    // getContent(args?: Object): String;
+    // //https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.editor/#insertContent
+    // insertContent(content: String, args?: Object);
+    // isDirty(): Boolean;
+    // off(name?: String, callback?: Function): Object;
+
+    // instance.on('event', (e) => {
+    //     // Callback logic
+    //   });
+    on(name: String, callback?: Function, prepend?: Boolean): Object;
+    resetContent(initialContent: String);
+    documentBaseUrl: string;
+    baseUri: string;
+    id: string;
+    plugins: Record<string, Plugin>;
+    documentBaseURI: string;
+    baseURI: string;
+    contentCSS: string[];
+    contentStyles: string[];
+    setMode: (mode: string) => void;
+    loadedCSS: Record<string, any>;
+    suffix: string;
+    inline: boolean;
+    isNotDirty: boolean;
+    callbackLookup: any;
+    bodyElement: HTMLElement;
+    bookmark: any;
+    composing: boolean;
+    container: HTMLElement;
+    contentAreaContainer: HTMLElement;
+    contentDocument: Document;
+    contentWindow: Window;
+    delegates: Record<string, (event: any) => void>;
+    destroyed: boolean;
+    editorContainer: HTMLElement;
+    eventRoot?: Element;
+    formElement: HTMLElement;
+    formEventDelegate: (e: Event) => void;
+    hasHiddenInput: boolean;
+    hasVisual: boolean;
+    hidden: boolean;
+    iframeElement: HTMLIFrameElement | null;
+    iframeHTML: string;
+    initialized: boolean;
+    orgDisplay: string;
+    orgVisibility: string;
+    readonly: boolean;
+    removed: boolean;
+    startContent: string;
+    targetElm: HTMLElement;
+    theme: string;
+    validate: boolean;
+    _beforeUnload: () => void;
+    _mceOldSubmit: any;
+    _pendingNativeEvents: string[];
+    _skinLoaded: boolean;
+    render(): void;
+    focus(skipFocus?: boolean): void;
+    hasFocus(): boolean;
+    execCallback(name: string, ...x: any[]): any;
+    getParam<T>(name: string, defaultVal: T, type?: string): T;
+    hasPlugin(name: string, loaded?: boolean): boolean;
+    nodeChanged(args?: any): void;
+    execCommand(cmd: string, ui?: boolean, value?: any, args?: any): boolean;
+    queryCommandState(cmd: string): boolean;
+    queryCommandValue(cmd: string): string;
+    queryCommandSupported(cmd: string): boolean;
+    show(): void;
+    hide(): void;
+    isHidden(): boolean;
+    setProgressState(state: boolean, time?: number): void;
+    load(args?: any): string;
+    save(args?: any): string;
+    setContent(content: string): string;
+    getContent(): string;
+    insertContent(content: string, args?: any): void;
+    resetContent(initialContent?: string): void;
+    isDirty(): boolean;
+    setDirty(state: boolean): void;
+    getContainer(): HTMLElement;
+    getContentAreaContainer(): HTMLElement;
+    getElement(): HTMLElement;
+    getWin(): Window;
+    getDoc(): Document;
+    getBody(): HTMLElement;
+    convertURL(url: string, name: string, elm?: any): string;
+    addVisual(elm?: HTMLElement): void;
+    remove(): void;
+    destroy(automatic?: boolean): void;
+    addButton(): void;
+    addSidebar(): void;
+    addMenuItem(): void;
+    addContextToolbar(): void;
+}

src/app/ui/html-editor/html-editor.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HtmlEditorComponent } from './html-editor.component';
+import { EditorModule } from '@tinymce/tinymce-angular';
+import { FormsModule } from '@angular/forms';
+
+
+
+@NgModule({
+  declarations: [HtmlEditorComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    EditorModule
+  ],
+  exports: [HtmlEditorComponent],
+
+})
+export class HtmlEditorModule { }

src/app/utilities/enum-utils.ts

@@ -8,4 +8,5 @@ export class EnumUtils {
         }
         return false;
     }
+
 }