Update tinymce demo

Author: dmacfarlane

angular.json

@@ -60,12 +60,15 @@
             "tsConfig": "projects/demo-app/tsconfig.app.json",
             "assets": [
               "projects/demo-app/src/favicon.ico",
-              "projects/demo-app/src/assets"
+              "projects/demo-app/src/assets",
+              { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
             ],
             "styles": [
               "projects/demo-app/src/styles.css"
             ],
-            "scripts": [],
+            "scripts": [
+              "node_modules/tinymce/tinymce.min.js"
+            ],
             "vendorChunk": true,
             "extractLicenses": false,
             "buildOptimizer": false,

package-lock.json

@@ -19,11 +19,13 @@
     "@angular/platform-browser": "~12.0.2",
     "@angular/platform-browser-dynamic": "~12.0.2",
     "@angular/router": "~12.0.2",
+    "@tinymce/tinymce-angular": "^4.2.3",
     "angular-in-memory-web-api": "^0.11.0",
     "codelyzer": "^6.0.0",
     "core-js": "^3.6.5",
     "rxjs": "~6.5.5",
     "rxjs-compat": "^6.5.5",
+    "tinymce": "^5.8.1",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"
   },

package.json

@@ -34,7 +34,7 @@ describe('angular-mentions app', function() {
   it('test mentions iframe', () => {
     page.navigateTo();
     expect(page.getHeadingText()).toEqual('Angular Mentions');
-    let el = element.all(by.id('tmce_ifr'));
+    let el = element.all(by.css('editor iframe'));
     // iframe testing workaround - sendKeys is not working unless menu is opened first
     // this wasn't needed in previous versions of angular/protractor
     // el.click();

projects/demo-app-e2e/src/app.e2e-spec.ts

@@ -2,6 +2,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 
+import { EditorModule } from '@tinymce/tinymce-angular';
+
 // Imports for loading & configuring the in-memory web api
 import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
 import { InMemoryDataService }  from './demo-async/in-memory-data.service';
@@ -19,6 +21,7 @@ import { TestPositionComponent } from './test-position/test-position.component';
 @NgModule({
   imports: [
     BrowserModule,
+    EditorModule,
     HttpClientModule,
     InMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 500 }),
     MentionModule

projects/demo-app/src/app/app.module.ts

@@ -1,10 +1,8 @@
-import { Component, ElementRef, NgZone, Input, ViewChild } from '@angular/core';
+import { Component, NgZone, Input, ViewChild } from '@angular/core';
 
 import { MentionDirective } from 'angular-mentions';
 import { COMMON_NAMES } from '../common-names';
 
-declare var tinymce: any;
-
 /**
  * Angular 2 Mentions.
  * https://github.com/dmacfarlane/angular-mentions
@@ -19,29 +17,31 @@ declare var tinymce: any;
       <div>
         <textarea class="hidden" cols="60" rows="4" id="tmce">{{htmlContent}}</textarea>
       </div>
-    </div>`
+    </div>
+    <editor [init]="CONFIG"></editor>    
+    `
 })
 export class DemoTinymceComponent {
   @Input() htmlContent:string;
   @ViewChild(MentionDirective, { static: true }) mention: MentionDirective;
   public items:string[] = COMMON_NAMES;
-  constructor(private _elementRef: ElementRef, private _zone: NgZone) {}
-  ngAfterViewInit() {
-    tinymce.init({
-      mode: 'exact',
-      height: 100,
-      theme: 'modern',
-      plugins: [
-        'advlist autolink lists link image charmap print preview anchor',
-        'searchreplace visualblocks code fullscreen',
-        'insertdatetime media table contextmenu paste code'
-      ],
-      toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
-      elements: "tmce",
-      setup: this.tinySetup.bind(this)
-    }
-    );
-  }
+  public CONFIG = {
+    base_url: '/tinymce',
+    suffix: '.min',
+    height: 200,
+    menubar: false,
+    plugins: [
+      'advlist autolink lists link image charmap print preview anchor',
+      'searchreplace visualblocks code fullscreen',
+      'insertdatetime media table paste code help wordcount'
+    ],
+    toolbar:
+      'undo redo | formatselect | bold italic backcolor | \
+      alignleft aligncenter alignright alignjustify | \
+      bullist numlist outdent indent | removeformat | help',
+    setup: this.tinySetup.bind(this)
+  };
+  constructor(private _zone: NgZone) {}
   tinySetup(ed) {
     ed.on('init', (args) => {
       this.mention.setIframe(ed.iframeElement);