From 7d6fe6f48a18344e5c58c478f2307c40fd0ab684 Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Wed, 14 May 2025 13:52:46 +0200 Subject: [PATCH] DOC-3182: update angular integration docs (#3707) * DOC-3182: update angular integration docs * DOC-3182: remove comment * DOC-3182: remove --save flag * Update modules/ROOT/partials/integrations/angular-quick-start.adoc * Update modules/ROOT/partials/integrations/angular-quick-start.adoc * Update modules/ROOT/partials/integrations/angular-quick-start.adoc * Update modules/ROOT/partials/integrations/angular-tech-ref.adoc * Update modules/ROOT/partials/integrations/angular-tech-ref.adoc * Update modules/ROOT/partials/integrations/angular-tech-ref.adoc * Update modules/ROOT/partials/integrations/angular-tech-ref.adoc * DOC-3182: Replace your-api-key with no-api-key. * DOC-3182: update warning message for no-api-key. --------- Co-authored-by: Karl Kemister-Sheppard --- .../integrations/angular-quick-start.adoc | 38 +++++++-- .../integrations/angular-tech-ref.adoc | 80 +++++++------------ 2 files changed, 59 insertions(+), 59 deletions(-) diff --git a/modules/ROOT/partials/integrations/angular-quick-start.adoc b/modules/ROOT/partials/integrations/angular-quick-start.adoc index f0d6bd20a..f28727148 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 link: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. + [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. + [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

@@ -76,7 +75,7 @@ ifeval::["{productSource}" == "cloud"] + [source,tsx] ---- - + ---- endif::[] ifeval::["{productSource}" == "package-manager"] @@ -178,7 +177,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. @@ -188,6 +187,8 @@ 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. +ifeval::["{productSource}" == "package-manager"] + [source,ts] ---- import { NgModule } from '@angular/core'; @@ -207,6 +208,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 4d579f2b4..b074c9ac1 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]] @@ -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 "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. @@ -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]] @@ -172,9 +168,9 @@ Such as: [source,html,subs="attributes+"] ---- +/> ---- 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: link: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] ---- - + ----