tinymce · tiny-ben-tran · Jul 29, 2025 · Jun 25, 2025 · Jun 25, 2025 · Jun 30, 2025
@@ -6,6 +6,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+- Defaulted cloudChannel to `8`. #INT-3351
+
 ## 9.0.0 - 2025-05-29
 
 ### Added

@@ -4,34 +4,21 @@
 
 This package is a thin wrapper around [TinyMCE](https://github.com/tinymce/tinymce) to make it easier to use in an Angular application.
 
-* If you need detailed documentation on TinyMCE, see: [TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/7/).
-* For the TinyMCE Angular Quick Start, see: [TinyMCE Documentation - Angular Integration](https://www.tiny.cloud/docs/tinymce/7/angular-cloud/).
-* For the TinyMCE Angular Technical Reference, see: [TinyMCE Documentation - TinyMCE Angular Technical Reference](https://www.tiny.cloud/docs/tinymce/7/angular-ref/).
+* If you need detailed documentation on TinyMCE, see: [TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/latest/).
+* For the TinyMCE Angular Quick Start, see: [TinyMCE Documentation - Angular Integration](https://www.tiny.cloud/docs/tinymce/latest/angular-cloud/).
+* For the TinyMCE Angular Technical Reference, see: [TinyMCE Documentation - TinyMCE Angular Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/).
 * For our quick demos, check out the TinyMCE Angular [Storybook](https://tinymce.github.io/tinymce-angular/).
 
 ### Support
 
-For Angular 16+, use integration version 8.x:
-
-`npm install @tinymce/tinymce-angular@^8`
-
-For Angular 14+, use integration version 7.x:
-
-`npm install @tinymce/tinymce-angular@^7`
-
-For Angular 13+, use integration version 6.x:
-
-`npm install @tinymce/tinymce-angular@^6`
-
-For Angular 9+, use integration version 4.x:
-
-`npm install @tinymce/tinymce-angular@^4`
-
-For Angular 8 and below use integration version 3.x:
-
-`npm install @tinymce/tinymce-angular@^3`
-
-Versions below Angular 5 are not supported.
+|Angular version|`tinymce-angular` version|
+|---            |---                      |
+|16+            |8+                       |
+|14+            |7.x                      |
+|13+            |6.x                      |
+|9+             |4.x                      |
+|<= 8           |3.x                      |
+|< 5            | Not supported           |
 
 ### Issues
 

@@ -2,4 +2,4 @@
 
 ## Reporting a Vulnerability
 
-For details on how to report security issues to Tiny, refer to the [Reporting TinyMCE security issues documentation](https://www.tiny.cloud/docs/tinymce/6/security/#reportingtinymcesecurityissues).
+For details on how to report security issues to Tiny, refer to the [Reporting TinyMCE security issues documentation](https://www.tiny.cloud/docs/tinymce/latest/security/#reportingtinymcesecurityissues).
@@ -62,12 +62,13 @@
     "rimraf": "^6.0.1",
     "rxjs": "^7.8.1",
     "storybook": "^8.2.5",
-    "tinymce": "^7",
+    "tinymce": "^8.0.0",
     "tinymce-4": "npm:tinymce@^4",
     "tinymce-5": "npm:tinymce@^5",
     "tinymce-6": "npm:tinymce@^6",
     "tinymce-7": "npm:tinymce@^7",
     "tinymce-7.5.0": "npm:tinymce@7.5.0",
+    "tinymce-8": "npm:tinymce@^8",
     "to-string-loader": "^1.1.5",
     "tslib": "^2.6.2",
     "typescript": "~5.5.4",

@@ -32,7 +32,6 @@ export const IframeStory: StoryObj<EditorComponent> = {
       height: 300,
       plugins: 'help',
     },
-    cloudChannel: '6-dev',
   }
 };
 
@@ -44,7 +43,7 @@ export const InlineStory: StoryObj<EditorComponent> = {
         <editor apiKey="${apiKey}" inline initialValue='${sampleContent}'></editor>
       </div>
     `
-  }),
+  })
 };
 
 export const EventBindingStory: StoryObj<EditorComponent> = {
@@ -55,8 +54,7 @@ export const EventBindingStory: StoryObj<EditorComponent> = {
       declarations: [ EventBindingComponent ],
     },
     template: `<event-binding/>`
-  }),
-
+  })
 };
 
 export const EventForwardingStory: StoryObj<EditorComponent> = {

@@ -11,7 +11,7 @@
     "@angular/common": ">=16.0.0",
     "@angular/forms": ">=16.0.0",
     "rxjs": "^7.4.0",
-    "tinymce": "^7.0.0 || ^6.0.0 || ^5.5.0"
+    "tinymce": "^8.0.0 || ^7.0.0 || ^6.0.0 || ^5.5.0"
   },
   "peerDependenciesMeta": {
     "tinymce": {

@@ -34,7 +34,7 @@ const EDITOR_COMPONENT_VALUE_ACCESSOR = {
   multi: true
 };
 
-export type Version = `${'4' | '5' | '6' | '7'}${'' | '-dev' | '-testing' | `.${number}` | `.${number}.${number}`}`;
+export type Version = `${'4' | '5' | '6' | '7' | '8'}${'' | '-dev' | '-testing' | `.${number}` | `.${number}.${number}`}`;
 
 @Component({
   selector: 'editor',
@@ -51,7 +51,7 @@ export type Version = `${'4' | '5' | '6' | '7'}${'' | '-dev' | '-testing' | `.${
  */
 export class EditorComponent extends Events implements AfterViewInit, ControlValueAccessor, OnDestroy {
 
-  @Input() public cloudChannel: Version = '7';
+  @Input() public cloudChannel: Version = '8';
   @Input() public apiKey = 'no-api-key';
   @Input() public licenseKey?: string;
   @Input() public init?: EditorOptions;

@@ -62,7 +62,7 @@ export const editorHook = <T = unknown>(component: Type<T>, moduleDef: TestModul
           .map((v): EditorComponent => v.componentInstance)
           .getOrDie('EditorComponent instance not found');
 
-    for (const [ key, value ] of Object.entries(props)) {
+    for (const [ key, value ] of Object.entries({ ...props, licenseKey: 'gpl' })) {
       (editorComponent as any)[key] = value;
     }
 

@@ -23,7 +23,7 @@ describe('DisabledPropertyTest', () => {
   const assertDisabledOption = (editor: Editor, expected: boolean) =>
     Assertions.assertEq(`TinyMCE should have disabled option set to ${expected}`, expected, editor.options.get('disabled'));
 
-  eachVersionContext([ '5', '6', '7.5.0', ], () => {
+  eachVersionContext([ '5', '6', '7.5.0' ], () => {
     const createFixture = editorHook(EditorComponent);
 
     it(`Component 'disabled' property is mapped to editor 'readonly' mode`, async () => {
@@ -77,7 +77,7 @@ describe('DisabledPropertyTest', () => {
     });
   });
 
-  eachVersionContext([ '7' ], () => {
+  eachVersionContext([ '7', '8' ], () => {
     const createFixture = editorHook(EditorComponent);
 
     it(`Component 'disabled' property is mapped to editor 'disabled' property`, async () => {
@@ -88,7 +88,7 @@ describe('DisabledPropertyTest', () => {
     });
 
     it(`Toggling component's 'disabled' property is mapped to editor 'disabled' option`, async () => {
-      const fixture = await createFixture();
+      const fixture = await createFixture({});
       const { editor } = fixture;
 
       assertDesignMode(editor);

@@ -16,7 +16,7 @@ describe('EventBlacklistingTest', () => {
       tap(() => Assertions.assertEq('Subscribers to events should run within NgZone', true, NgZone.isInAngularZone()))
     );
 
-  eachVersionContext([ '4', '5', '6', '7' ], () => {
+  eachVersionContext([ '4', '5', '6', '7', '8' ], () => {
     const createFixture = editorHook(EditorComponent);
 
     it('Events should be bound when allowed', async () => {

@@ -21,7 +21,7 @@ describe('FormControlTest', () => {
     }
   };
 
-  eachVersionContext([ '4', '5', '6', '7' ], () => {
+  eachVersionContext([ '4', '5', '6', '7', '8' ], () => {
     [ ChangeDetectionStrategy.Default, ChangeDetectionStrategy.OnPush ].forEach((changeDetection) => {
       context(`[formControl] with change detection: ${changeDetection}`, () => {
         @Component({
@@ -59,7 +59,7 @@ describe('FormControlTest', () => {
           imports: [ EditorComponent, ReactiveFormsModule ],
           template: `
             <form [formGroup]="form">
-              <editor formControlName="editor" />
+              <editor formControlName="editor" licenseKey="gpl" />
               <button #resetBtn type="reset">Reset form</button>
               <button #submitBtn [disabled]="form.invalid" type="submit">Submit form</button>
             </form>

@@ -16,7 +16,7 @@ describe('LoadTinyTest', () => {
     Assertions.assertEq(`Loaded version of TinyMCE should be ${version}`, version, Global.tinymce.majorVersion);
   };
 
-  for (const version of [ '4', '5', '6', '7' ] as Version[]) {
+  for (const version of [ '4', '5', '6', '7', '8' ] as Version[]) {
     context(`With local version ${version}`, () => {
       const createFixture = editorHook(EditorComponent, {
         providers: [
@@ -29,7 +29,7 @@ describe('LoadTinyTest', () => {
 
       before(deleteTinymce);
 
-      it('Should be able to load local version of TinyMCE specified via depdendency injection', async () => {
+      it('Should be able to load local version of TinyMCE specified via dependency injection', async () => {
         const { editor } = await createFixture();
         assertTinymceVersion(version, editor);
       });
@@ -46,7 +46,7 @@ describe('LoadTinyTest', () => {
     });
   }
 
-  for (const version of [ '5', '6', '7' ] as Version[]) {
+  for (const version of [ '5', '6', '7', '8' ] as Version[]) {
     context(`With cloud version ${version}`, () => {
       const createFixture = editorHook(EditorComponent);
 

@@ -15,7 +15,7 @@ describe('NgModelTest', () => {
     Assertions.assertEq('assert ngModel ' + prop + ' state', expected, ngModel[prop]);
   };
 
-  eachVersionContext([ '4', '5', '6', '7' ], () => {
+  eachVersionContext([ '4', '5', '6', '7', '8' ], () => {
     @Component({
       standalone: true,
       imports: [ EditorComponent, FormsModule ],

@@ -10,7 +10,7 @@ import { first } from 'rxjs';
 import { throwTimeout } from '../alien/TestHelpers';
 
 describe('NgZoneTest', () => {
-  eachVersionContext([ '4', '5', '6', '7' ], () => {
+  eachVersionContext([ '4', '5', '6', '7', '8' ], () => {
     const createFixture = fixtureHook(EditorComponent, { imports: [ EditorComponent ] });
 
     it('Subscribers to events should run within NgZone', async () => {

@@ -42,7 +42,7 @@ describe('PropTest', () => {
       )
     );
 
-  eachVersionContext([ '4', '5', '6', '7' ], () => {
+  eachVersionContext([ '4', '5', '6', '7', '8' ], () => {
     context('Single editor with ID', () => {
       @Component({
         standalone: true,

@@ -13092,10 +13092,15 @@ tiny-invariant@^1.3.1, tiny-invariant@^1.3.3:
   resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.8.0.tgz#d57a597aecdc2108f2dd68fe74c6099c0a0ef66f"
   integrity sha512-MUER5MWV9mkOB4expgbWknh/C5ZJvOXQlMVSx4tJxTuYtcUCDB6bMZ34fWNOIc8LvrnXmGHGj0eGQuxjQyRgrA==
 
-tinymce@^7:
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.2.1.tgz#9b4f6b5a0fa647e2953c174ac69aa47483683332"
-  integrity sha512-ADd1cvdIuq6NWyii0ZOZRuu+9sHIdQfcRNWBcBps2K8vy7OjlRkX6iw7zz1WlL9kY4z4L1DvIP+xOrVX/46aHA==
+"tinymce-8@npm:tinymce@^8":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-8.0.0.tgz#e6abd6bd31a2972f0a514462c281d4f7b2dae50e"
+  integrity sha512-E1OwCXXCzmZLx6sQVeMHdb61Hsp+7AxWtYstXp7Yw59Et4AdHQ0N36n7InVaYDmq2aBlCM8qkTQYKEqKgecP3A==
+
+tinymce@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-8.0.0.tgz#e6abd6bd31a2972f0a514462c281d4f7b2dae50e"
+  integrity sha512-E1OwCXXCzmZLx6sQVeMHdb61Hsp+7AxWtYstXp7Yw59Et4AdHQ0N36n7InVaYDmq2aBlCM8qkTQYKEqKgecP3A==
 
 tinyspy@^2.2.0:
   version "2.2.1"
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,4 @@

		## Reporting a Vulnerability

		For details on how to report security issues to Tiny, refer to the [Reporting TinyMCE security issues documentation](https://www.tiny.cloud/docs/tinymce/6/security/#reportingtinymcesecurityissues).
		For details on how to report security issues to Tiny, refer to the [Reporting TinyMCE security issues documentation](https://www.tiny.cloud/docs/tinymce/latest/security/#reportingtinymcesecurityissues).