From dc2053a3e5f0caf3954bd80c018792207828d431 Mon Sep 17 00:00:00 2001 From: dmacfarlane Date: Sun, 30 May 2021 11:15:28 -0400 Subject: [PATCH] Update tinymce demo --- angular.json | 7 ++- package-lock.json | 45 +++++++++++++++++++ package.json | 2 + projects/demo-app-e2e/src/app.e2e-spec.ts | 2 +- projects/demo-app/src/app/app.module.ts | 3 ++ .../demo-tinymce/demo-tinymce.component.ts | 42 ++++++++--------- 6 files changed, 77 insertions(+), 24 deletions(-) diff --git a/angular.json b/angular.json index 55b7722fe..fb33fbd01 100644 --- a/angular.json +++ b/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, diff --git a/package-lock.json b/package-lock.json index 4b2073a9b..fdb29e029 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,11 +15,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" }, @@ -2375,6 +2377,24 @@ "yarn": ">= 1.13.0" } }, + "node_modules/@tinymce/tinymce-angular": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/@tinymce/tinymce-angular/-/tinymce-angular-4.2.3.tgz", + "integrity": "sha512-YgmcnfyKnsQ9Y5ZoSsozdARV8qVK1RpTbimmD1T9/eKwf5FL9sTm7uGKaJX2KMru5c6a5w2raLvqJm66bksA/w==", + "dependencies": { + "tslib": "^1.10.0" + }, + "peerDependencies": { + "@angular/common": ">=9.0.0", + "@angular/core": ">=9.0.0", + "@angular/forms": ">=9.0.0" + } + }, + "node_modules/@tinymce/tinymce-angular/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -15175,6 +15195,11 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, + "node_modules/tinymce": { + "version": "5.8.1", + "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.8.1.tgz", + "integrity": "sha512-1zGXdZplWQafstlC7sri0ttCgMagsiXDc9N3I8JNrPOsWAeTfq4AAJWZoxsQBYn8gYcuPu/WzMKG5SoJjxI1VA==" + }, "node_modules/tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -18805,6 +18830,21 @@ "jsonc-parser": "3.0.0" } }, + "@tinymce/tinymce-angular": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/@tinymce/tinymce-angular/-/tinymce-angular-4.2.3.tgz", + "integrity": "sha512-YgmcnfyKnsQ9Y5ZoSsozdARV8qVK1RpTbimmD1T9/eKwf5FL9sTm7uGKaJX2KMru5c6a5w2raLvqJm66bksA/w==", + "requires": { + "tslib": "^1.10.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -28742,6 +28782,11 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, + "tinymce": { + "version": "5.8.1", + "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.8.1.tgz", + "integrity": "sha512-1zGXdZplWQafstlC7sri0ttCgMagsiXDc9N3I8JNrPOsWAeTfq4AAJWZoxsQBYn8gYcuPu/WzMKG5SoJjxI1VA==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", diff --git a/package.json b/package.json index 511e18211..7cff756af 100644 --- a/package.json +++ b/package.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" }, diff --git a/projects/demo-app-e2e/src/app.e2e-spec.ts b/projects/demo-app-e2e/src/app.e2e-spec.ts index 1ce720732..c4774ac59 100644 --- a/projects/demo-app-e2e/src/app.e2e-spec.ts +++ b/projects/demo-app-e2e/src/app.e2e-spec.ts @@ -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(); diff --git a/projects/demo-app/src/app/app.module.ts b/projects/demo-app/src/app/app.module.ts index 40a42965b..546805a53 100644 --- a/projects/demo-app/src/app/app.module.ts +++ b/projects/demo-app/src/app/app.module.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 diff --git a/projects/demo-app/src/app/demo-tinymce/demo-tinymce.component.ts b/projects/demo-app/src/app/demo-tinymce/demo-tinymce.component.ts index 6af11a213..a1094014a 100644 --- a/projects/demo-app/src/app/demo-tinymce/demo-tinymce.component.ts +++ b/projects/demo-app/src/app/demo-tinymce/demo-tinymce.component.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;
- ` + + + ` }) 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);