From 73f7b16d1fec2b7d0c86adec3597b4fe7f946eb6 Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Fri, 28 Feb 2025 14:00:21 +0100 Subject: [PATCH 01/12] DOC-3182: update angular integration docs --- .../integrations/angular-quick-start.adoc | 37 +++++++-- .../integrations/angular-tech-ref.adoc | 76 +++++++------------ 2 files changed, 57 insertions(+), 56 deletions(-) diff --git a/modules/ROOT/partials/integrations/angular-quick-start.adoc b/modules/ROOT/partials/integrations/angular-quick-start.adoc index 76d2c8b6b4..ebde079ff1 100644 --- a/modules/ROOT/partials/integrations/angular-quick-start.adoc +++ b/modules/ROOT/partials/integrations/angular-quick-start.adoc @@ -12,7 +12,7 @@ This procedure requires https://nodejs.org/[Node.js (and npm)]. == Procedure -. On a command line or command prompt, install the https://angular.io/cli[Angular CLI Tool] package. +. On a command line or command prompt, install the https://angular.dev/tools/cli[Angular CLI Tool] package. + [source,sh] ---- @@ -31,20 +31,20 @@ ng new --defaults --skip-git tinymce-angular-demo cd tinymce-angular-demo ---- ifeval::["{productSource}" == "package-manager"] -. Install the `+tinymce+` and `+tinymce-angular+` packages and save them to your `+package.json+` with `+--save+`. +. Install the `+tinymce+` and `+tinymce-angular+` packages and save them to your `+package.json+`. + [source,sh] ---- -npm install --save tinymce @tinymce/tinymce-angular +npm install tinymce @tinymce/tinymce-angular ---- endif::[] ifeval::["{productSource}" != "package-manager"] -. Install the `+tinymce-angular+` package and save it to your `+package.json+` with `+--save+`. +. Install the `+tinymce-angular+` package and save it to your `+package.json+`. + [source,sh] ---- -npm install --save @tinymce/tinymce-angular +npm install @tinymce/tinymce-angular ---- endif::[] . Using a text editor, open `+/path/to/tinymce-angular-demo/src/app/app.component.ts+` and replace the contents with: @@ -56,7 +56,6 @@ import { EditorComponent } from '@tinymce/tinymce-angular'; @Component({ selector: 'app-root', - standalone: true, imports: [EditorComponent], template: `

{productname} {productmajorversion} Angular Demo

@@ -179,7 +178,7 @@ To deploy the application to a local HTTP Server: ---- ng build ---- -. Copy the contents of the `+tinymce-angular-demo/dist+` directory to the root directory of the web server. +. Copy the contents of the `+tinymce-angular-demo/dist/tinymce-angular-demo/browser+` directory to the root directory of the web server. The application has now been deployed on the web server. @@ -189,6 +188,9 @@ NOTE: Additional configuration is required to deploy the application outside the == Angular Modules `+EditorModule+` is available to import from `+@tinymce/tinymce-angular+`. Which should be included in your `+my.module.ts+` file. +// TODO: make sure that I can remove it +ifeval::["{productSource}" == "package-manager"] + [source,ts] ---- import { NgModule } from '@angular/core'; @@ -208,6 +210,27 @@ import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular'; export class MyModule {} ---- +endif::[] + +ifeval::["{productSource}" != "package-manager"] + +[source,ts] +---- +import { NgModule } from '@angular/core'; +import { EditorModule } from '@tinymce/tinymce-angular'; + +@NgModule({ + /* ... */ + imports: [ + EditorModule + ], + /* ... */ +}) +export class MyModule {} +---- + +endif::[] + == Next Steps * For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook]. diff --git a/modules/ROOT/partials/integrations/angular-tech-ref.adoc b/modules/ROOT/partials/integrations/angular-tech-ref.adoc index f915cab951..d1006b7836 100644 --- a/modules/ROOT/partials/integrations/angular-tech-ref.adoc +++ b/modules/ROOT/partials/integrations/angular-tech-ref.adoc @@ -83,7 +83,7 @@ Add the `+EditorModule+` to `+@NgModule({imports})+`: + [source,html] ---- - + ---- [[configuring-the-editor]] @@ -104,7 +104,7 @@ The editor accepts the following properties: plugins="" tagName="div" toolbar="" -> +/> ---- None of the configuration properties are *required* for `+tinymce-angular+` to work. Specify a {cloudname} API key using `+apiKey+` to remove the `+This domain is not registered...+` warning message. @@ -124,9 +124,7 @@ include::partial$misc/get-an-api-key.adoc[] [source,html] ---- - + ---- [[licensekey]] @@ -146,9 +144,7 @@ Use this when self-hosting {productname} instead of loading from {cloudname}. Fo [source,jsx] ---- - + ---- [[cloudchannel]] @@ -174,7 +170,7 @@ Such as: +/> ---- For information {productname} development channels, see: xref:editor-plugin-version.adoc#{productmajorversion}-{productmajorversion}-testing-and-{productmajorversion}-dev-release-channels[Specifying the {productname} editor version deployed from Cloud - dev, testing, and stable releases]. @@ -194,9 +190,7 @@ The `+disabled+` property can dynamically switch the editor between a "disabled" [source,html] ---- - + ---- [[id]] @@ -212,9 +206,7 @@ An id for the editor. Used for retrieving the editor instance using the `+tinymc [source,html] ---- - + ---- [[init]] @@ -237,7 +229,7 @@ For information on the {productname} selector (`+tinymce.init+`), see: xref:basi plugins: 'lists link image paste help wordcount', toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help' }" -> +/> ---- [[initialvalue]] @@ -253,15 +245,13 @@ Initial content of the editor when the editor is initialized. [source,html] ---- - + ---- [[inline]] === `+inline+` -Used to set the editor to inline mode. Using `++` is the same as setting `+{inline: true}+` in the {productname} selector (`+tinymce.init+`). +Used to set the editor to inline mode. Using `++` is the same as setting `+{inline: true}+` in the {productname} selector (`+tinymce.init+`). For information on inline mode, see: xref:inline-editor-options.adoc#inline[User interface options - `+inline+`] and xref:use-tinymce-inline.adoc[Setup inline editing mode]. @@ -275,27 +265,23 @@ For information on inline mode, see: xref:inline-editor-options.adoc#inline[User [source,html] ---- - + ---- [[plugins]] === `+plugins+` -Used to include plugins for the editor. Using `++` is the same as setting `+{plugins: 'lists code'}+` in the {productname} selector (`+tinymce.init+`). +Used to include plugins for the editor. Using `++` is the same as setting `+{plugins: 'lists code'}+` in the {productname} selector (`+tinymce.init+`). For information on adding plugins to {productname}, see: xref:work-with-plugins.adoc[Add plugins to {productname}]. -*Type:* `+String+` or `+Array+` +*Type:* `+String+` ==== Example: using `+plugins+` [source,html] ---- - + ---- [[outputformat]] @@ -313,15 +299,13 @@ Used to specify the format of the content emitted by the `+tinymce-angular+` com [source,html] ---- - + ---- [[tagname]] === `+tagName+` -Only valid when xref:inline[`++`]. Used to define the HTML element for the editor in inline mode. +Only valid when xref:inline[`++`]. Used to define the HTML element for the editor in inline mode. *Type:* `+String+` @@ -334,13 +318,13 @@ Only valid when xref:inline[`++`]. Used to defi +/> ---- [[toolbar]] === `+toolbar+` -Used to set the toolbar for the editor. Using `++` is the same as setting `+{toolbar: 'bold italic'}+` in the {productname} selector (`+tinymce.init+`). +Used to set the toolbar for the editor. Using `++` is the same as setting `+{toolbar: 'bold italic'}+` in the {productname} selector (`+tinymce.init+`). For information setting the toolbar for {productname}, see: xref:toolbar-configuration-options.adoc#toolbar[User interface options - toolbar]. @@ -355,7 +339,7 @@ For information setting the toolbar for {productname}, see: xref:toolbar-configu +/> ---- [[using-the-ngmodel-directive]] @@ -365,10 +349,10 @@ The `+ngModel+` directive can be added to use the editor in a form: [source,html] ---- - + ---- -For information on using `+NgModel+`, see: https://angular.io/api/forms/NgModel[Angular documentation - NgModel]. +For information on using `+NgModel+`, see: https://angular.dev/api/forms/NgModel[Angular documentation - NgModel]. [[modelevents]] === `+modelEvents+` @@ -387,9 +371,7 @@ Used to specify the events that trigger the `+NgModelChange+` to emit. [source,html] ---- - + ---- [[using-with-reactive-forms]] @@ -402,10 +384,10 @@ To use {productname} Angular component with reactive forms: + [source,html] ---- - + ---- -For information on using reactive forms, see: https://angular.io/guide/reactive-forms[Angular documentation - Reactive Forms]. +For information on using reactive forms, see: https://angular.dev/guide/forms/reactive-forms[Angular documentation - Reactive Forms]. [[event-binding]] == Event binding @@ -414,7 +396,7 @@ Functions can be bound to editor events, such as: [source,html] ---- - + ---- When the handler is called (`+handleEvent+` in this example), it is called with an event containing two properties: @@ -517,9 +499,7 @@ Used to provide an allow-list of valid events to trigger from the editor to the [source,html] ---- - + ---- [[ignoreevents]] @@ -537,7 +517,5 @@ Used to block a list of events from the `+tinymce-angular+` component. [source,html] ---- - + ---- From 80f8e1eb14df2e69347643317c21816ffa95e16b Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Mon, 5 May 2025 15:01:08 +0200 Subject: [PATCH 02/12] DOC-3182: remove comment --- modules/ROOT/partials/integrations/angular-quick-start.adoc | 1 - 1 file changed, 1 deletion(-) diff --git a/modules/ROOT/partials/integrations/angular-quick-start.adoc b/modules/ROOT/partials/integrations/angular-quick-start.adoc index ebde079ff1..afceacc6ae 100644 --- a/modules/ROOT/partials/integrations/angular-quick-start.adoc +++ b/modules/ROOT/partials/integrations/angular-quick-start.adoc @@ -188,7 +188,6 @@ NOTE: Additional configuration is required to deploy the application outside the == Angular Modules `+EditorModule+` is available to import from `+@tinymce/tinymce-angular+`. Which should be included in your `+my.module.ts+` file. -// TODO: make sure that I can remove it ifeval::["{productSource}" == "package-manager"] [source,ts] From d3ea4c30e531195b39fc166e6645636b99abf70e Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Mon, 5 May 2025 15:02:11 +0200 Subject: [PATCH 03/12] DOC-3182: remove --save flag --- modules/ROOT/partials/integrations/angular-tech-ref.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/partials/integrations/angular-tech-ref.adoc b/modules/ROOT/partials/integrations/angular-tech-ref.adoc index d1006b7836..87b0f93669 100644 --- a/modules/ROOT/partials/integrations/angular-tech-ref.adoc +++ b/modules/ROOT/partials/integrations/angular-tech-ref.adoc @@ -48,7 +48,7 @@ To install the `+tinymce-angular+` package and save it to your `+package.json+`. [source,sh] ---- -npm install --save @tinymce/tinymce-angular +npm install @tinymce/tinymce-angular ---- [[using-the-tinymce-angular-integration]] From 0e27208a573c79bf73399c144348ebebb37e6b54 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Wed, 14 May 2025 08:57:47 +1000 Subject: [PATCH 04/12] Update modules/ROOT/partials/integrations/angular-quick-start.adoc --- modules/ROOT/partials/integrations/angular-quick-start.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/partials/integrations/angular-quick-start.adoc b/modules/ROOT/partials/integrations/angular-quick-start.adoc index afceacc6ae..8efed036ab 100644 --- a/modules/ROOT/partials/integrations/angular-quick-start.adoc +++ b/modules/ROOT/partials/integrations/angular-quick-start.adoc @@ -12,7 +12,7 @@ This procedure requires https://nodejs.org/[Node.js (and npm)]. == Procedure -. On a command line or command prompt, install the https://angular.dev/tools/cli[Angular CLI Tool] package. +. On a command line or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] package. + [source,sh] ---- From e0a46a82029767400885ea5d51d7d6ffe8dae31b Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Wed, 14 May 2025 08:58:04 +1000 Subject: [PATCH 05/12] Update modules/ROOT/partials/integrations/angular-quick-start.adoc --- modules/ROOT/partials/integrations/angular-quick-start.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/partials/integrations/angular-quick-start.adoc b/modules/ROOT/partials/integrations/angular-quick-start.adoc index 8efed036ab..5187f7f70f 100644 --- a/modules/ROOT/partials/integrations/angular-quick-start.adoc +++ b/modules/ROOT/partials/integrations/angular-quick-start.adoc @@ -31,7 +31,7 @@ ng new --defaults --skip-git tinymce-angular-demo cd tinymce-angular-demo ---- ifeval::["{productSource}" == "package-manager"] -. Install the `+tinymce+` and `+tinymce-angular+` packages and save them to your `+package.json+`. +. Install the `+tinymce+` and `+tinymce-angular+` packages. + [source,sh] ---- From b596dc1681aa0f3e92669aba5e522981fd419a70 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Wed, 14 May 2025 08:58:11 +1000 Subject: [PATCH 06/12] Update modules/ROOT/partials/integrations/angular-quick-start.adoc --- modules/ROOT/partials/integrations/angular-quick-start.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/partials/integrations/angular-quick-start.adoc b/modules/ROOT/partials/integrations/angular-quick-start.adoc index 5187f7f70f..0ccd946d2d 100644 --- a/modules/ROOT/partials/integrations/angular-quick-start.adoc +++ b/modules/ROOT/partials/integrations/angular-quick-start.adoc @@ -40,7 +40,7 @@ npm install tinymce @tinymce/tinymce-angular endif::[] ifeval::["{productSource}" != "package-manager"] -. Install the `+tinymce-angular+` package and save it to your `+package.json+`. +. Install the `+tinymce-angular+` package. + [source,sh] ---- From 67963fd4437021ea744ca11e983ea2a732838cc5 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Wed, 14 May 2025 08:58:21 +1000 Subject: [PATCH 07/12] Update modules/ROOT/partials/integrations/angular-tech-ref.adoc --- modules/ROOT/partials/integrations/angular-tech-ref.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/partials/integrations/angular-tech-ref.adoc b/modules/ROOT/partials/integrations/angular-tech-ref.adoc index 87b0f93669..3483100939 100644 --- a/modules/ROOT/partials/integrations/angular-tech-ref.adoc +++ b/modules/ROOT/partials/integrations/angular-tech-ref.adoc @@ -352,7 +352,7 @@ The `+ngModel+` directive can be added to use the editor in a form: ---- -For information on using `+NgModel+`, see: https://angular.dev/api/forms/NgModel[Angular documentation - NgModel]. +For information on using `+NgModel+`, see: link:https://angular.dev/api/forms/NgModel[Angular documentation - NgModel]. [[modelevents]] === `+modelEvents+` From 7dbf0f499182150a4ac26e11a5d3bed4bb398d28 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Wed, 14 May 2025 09:00:20 +1000 Subject: [PATCH 08/12] Update modules/ROOT/partials/integrations/angular-tech-ref.adoc --- modules/ROOT/partials/integrations/angular-tech-ref.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/partials/integrations/angular-tech-ref.adoc b/modules/ROOT/partials/integrations/angular-tech-ref.adoc index 3483100939..a2f1c14472 100644 --- a/modules/ROOT/partials/integrations/angular-tech-ref.adoc +++ b/modules/ROOT/partials/integrations/angular-tech-ref.adoc @@ -83,7 +83,7 @@ Add the `+EditorModule+` to `+@NgModule({imports})+`: + [source,html] ---- - + ---- [[configuring-the-editor]] From 27c8844582817dc80af787c7494f20bba613cf76 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Wed, 14 May 2025 09:07:18 +1000 Subject: [PATCH 09/12] Update modules/ROOT/partials/integrations/angular-tech-ref.adoc --- modules/ROOT/partials/integrations/angular-tech-ref.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/partials/integrations/angular-tech-ref.adoc b/modules/ROOT/partials/integrations/angular-tech-ref.adoc index a2f1c14472..33e0895941 100644 --- a/modules/ROOT/partials/integrations/angular-tech-ref.adoc +++ b/modules/ROOT/partials/integrations/angular-tech-ref.adoc @@ -124,7 +124,7 @@ include::partial$misc/get-an-api-key.adoc[] [source,html] ---- - + ---- [[licensekey]] From fc1d609e3fd8a516150e45d70e4a006cd95a3fe3 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Wed, 14 May 2025 09:07:52 +1000 Subject: [PATCH 10/12] Update modules/ROOT/partials/integrations/angular-tech-ref.adoc --- modules/ROOT/partials/integrations/angular-tech-ref.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/partials/integrations/angular-tech-ref.adoc b/modules/ROOT/partials/integrations/angular-tech-ref.adoc index 33e0895941..fdd7b70fb1 100644 --- a/modules/ROOT/partials/integrations/angular-tech-ref.adoc +++ b/modules/ROOT/partials/integrations/angular-tech-ref.adoc @@ -168,7 +168,7 @@ Such as: [source,html,subs="attributes+"] ---- ---- From 333699656ea167ad350cc82014b60021bddd315b Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Wed, 14 May 2025 09:26:05 +1000 Subject: [PATCH 11/12] DOC-3182: Replace your-api-key with no-api-key. --- modules/ROOT/partials/integrations/angular-quick-start.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/partials/integrations/angular-quick-start.adoc b/modules/ROOT/partials/integrations/angular-quick-start.adoc index 0ccd946d2d..2b72d57131 100644 --- a/modules/ROOT/partials/integrations/angular-quick-start.adoc +++ b/modules/ROOT/partials/integrations/angular-quick-start.adoc @@ -75,7 +75,7 @@ ifeval::["{productSource}" == "cloud"] + [source,tsx] ---- - + ---- endif::[] ifeval::["{productSource}" == "package-manager"] From 8947e2de190755b20a1d2963d41febee1f2ed50e Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Wed, 14 May 2025 09:58:29 +1000 Subject: [PATCH 12/12] DOC-3182: update warning message for no-api-key. --- modules/ROOT/partials/integrations/angular-tech-ref.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/partials/integrations/angular-tech-ref.adoc b/modules/ROOT/partials/integrations/angular-tech-ref.adoc index fdd7b70fb1..b074c9ac15 100644 --- a/modules/ROOT/partials/integrations/angular-tech-ref.adoc +++ b/modules/ROOT/partials/integrations/angular-tech-ref.adoc @@ -107,7 +107,7 @@ The editor accepts the following properties: /> ---- -None of the configuration properties are *required* for `+tinymce-angular+` to work. Specify a {cloudname} API key using `+apiKey+` to remove the `+This domain is not registered...+` warning message. +None of the configuration properties are *required* for `+tinymce-angular+` to work. Specify a {cloudname} API key using `+apiKey+` to remove the "A valid API key is required to continue using TinyMCE. Please alert the admin to check the current API key. Click here to learn more." warning message. [[apikey]] === `+apiKey+`