Skip to content

Commit cf797bf

Browse files
tiny-ben-trantiny-ben-tran
committed
Update angular docs
1 parent 6135b00 commit cf797bf

File tree

6 files changed

+110
-145
lines changed

6 files changed

+110
-145
lines changed

‎modules/ROOT/pages/angular-cloud.adoc‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
= Using {productname} from the Tiny Cloud CDN with the Angular framework
1+
= Using {productname} from Tiny Cloud in Angular
22
:navtitle: Angular
3-
:description: A guide on integrating TinyMCE from the Tiny Cloud into the Angular framework.
3+
:description: A guide on using TinyMCE from the Tiny Cloud in a Angular project.
44
:keywords: integration, integrate, angular
55
:productSource: cloud
66

7+
This guide shows how to integrate {productname} from Tiny Cloud into an Angular application using https://github.com/tinymce/tinymce-angular[{productname} Angular component].
8+
9+
710
include::partial$integrations/angular-quick-start.adoc[]

‎modules/ROOT/pages/angular-pm-bundle.adoc‎

Lines changed: 11 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
= Bundling TinyMCE with an Angular application
1+
= Bundling TinyMCE from NPM in an Angular application
22
:navtitle: Using a package manager with bundling
3-
:description: A guide on bundling TinyMCE with an Angular application using Vite.
3+
:description: A guide on bundling TinyMCE in an Angular application using Vite.
44
:keywords: integration, integrate, angular, bundle, vite, npm, tinymce
55
:productSource: package-manager
66
:packageName: @tinymce/tinymce-angular
77

8-
The https://github.com/tinymce/tinymce-angular[Official {productname} Angular component] integrates {productname} into Angular projects. This procedure creates a https://angular.dev/tools/cli/setup-local[basic Angular application] containing a bundled {productname} editor.
8+
This guide shows how to integrate the NPM version of {productname} in an Angular application using a module bundler Vite.
99

1010
For examples of the {productname} Angular integration, visit https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
1111

@@ -15,7 +15,7 @@ This procedure requires https://nodejs.org/[Node.js (and NPM)].
1515

1616
== Procedure
1717

18-
. On a command line or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] package.
18+
. From a terminal or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] globally.
1919
+
2020
[source,sh]
2121
----
@@ -27,27 +27,14 @@ npm install -g @angular/cli
2727
----
2828
ng new --defaults --skip-git tinymce-angular-demo
2929
----
30-
. Change into the newly created directory.
30+
. Go to the newly project directory and install `+tinymce+` and `+@tinymce/tinymce-angular+`.
3131
+
3232
[source,sh]
3333
----
34-
cd tinymce-angular-demo
34+
cd tinymce-angular-demo && npm install tinymce @tinymce/tinymce-angular
3535
----
36-
. Install the `+tinymce+` and `+@tinymce/tinymce-angular+` packages.
3736
+
38-
[source,sh]
39-
----
40-
npm install tinymce @tinymce/tinymce-angular
41-
----
42-
+
43-
include::partial$integrations/premium-plugins-install-step-link.adoc[]
44-
+
45-
[NOTE]
46-
====
47-
For information on configuring premium plugins when bundling, see: xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins].
48-
====
49-
+
50-
. Using a text editor, create `+src/app/editor.component.ts+` and set the contents to:
37+
. Create `+src/app/editor.component.ts+`
5138
+
5239
[source,ts]
5340
----
@@ -74,11 +61,10 @@ import 'tinymce/plugins/lists';
7461
import 'tinymce/plugins/table';
7562
import 'tinymce/plugins/code';
7663
import 'tinymce/plugins/help';
77-
import 'tinymce/plugins/help/js/en.js';
64+
// Include resources that a plugin lazy-loads at the run-time
65+
import 'tinymce/plugins/help/js/i18n/keynav/en.js';
7866
import 'tinymce/plugins/wordcount';
7967
80-
include::partial$integrations/premium-plugins-bundling.adoc[]
81-
8268
// Content styles, including inline UI like fake cursors
8369
import 'tinymce/skins/content/default/content.js';
8470
import 'tinymce/skins/ui/oxide/content.js';
@@ -103,7 +89,7 @@ export class MyEditorComponent {
10389
}
10490
----
10591
+
106-
. Using a text editor, open `+src/app/app.component.ts+` and update it to use the editor component:
92+
. Open `+src/app/app.component.ts+` and update it to use `MyEditorComponent`:
10793
+
10894
[source,ts]
10995
----
@@ -122,24 +108,14 @@ import { MyEditorComponent } from './editor.component';
122108
export class AppComponent {}
123109
----
124110
+
125-
. Run `+ng serve+` to start a dev server
111+
. Run the Angular development server
126112
+
127113
[source,sh]
128114
----
129115
ng serve
130116
----
131117
+
132118

133-
. Build the application for production:
134-
+
135-
[source,sh]
136-
----
137-
ng build
138-
----
139-
+
140-
This command creates an optimized production bundle in the `+dist+` directory.
141-
142-
. If premium plugins are included, update the `+licenseKey+` option in the editor component and include your xref:license-key.adoc[License Key].
143119

144120
== Next Steps
145121

‎modules/ROOT/pages/angular-pm.adoc‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
= Using the {productname} package with the Angular framework
1+
= Using {productname} from NPM in Angular
22
:navtitle: Using a package manager
3-
:description: A guide on integrating the TinyMCE package into the Angular framework.
3+
:description: A guide on integrating the TinyMCE package into an Angular application.
44
:keywords: integration, integrate, angular
55
:productSource: package-manager
66

7+
This guide shows how to integrate the NPM version of {productname} in an Angular application.
8+
79
include::partial$integrations/angular-quick-start.adoc[]

‎modules/ROOT/pages/angular-zip.adoc‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
= Using the {productname} .zip package with the Angular framework
1+
= Using the {productname} from .zip package in Angular
22
:navtitle: Using a .zip package
3-
:description: A guide on integrating a .zip version of TinyMCE into the Angular framework.
3+
:description: A guide on integrating a .zip version of TinyMCE into an Angular application.
44
:keywords: integration, integrate, angular
55
:productSource: zip
66

7+
This guide shows how to integrate {productname} from a .zip package in an Angular application.
8+
79
include::partial$integrations/angular-quick-start.adoc[]

‎modules/ROOT/partials/integrations/angular-load-tinymce-independently.adoc‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
2+
. There are two ways to add the {productname} into the application:
3+
.. Lazy load {productname} using the provided `TINYMCE_SCRIPT_SRC` dependency provider.
4+
* Add {productname} to the `+assets+` configuration in `+angular.json+`. This will make {productname} available as a static asset to the application.
5+
+
6+
[source,json]
7+
----
8+
"assets": [
9+
{
10+
"glob": "**/*",
11+
"input": "node_modules/tinymce",
12+
"output": "/tinymce/"
13+
}
14+
]
15+
----
16+
+
17+
18+
* Update the component's dependency providers.
19+
+
20+
[source,ts]
21+
----
22+
import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
23+
24+
@Component({
25+
/* ... */
26+
standalone: true,
27+
imports: [EditorComponent],
28+
providers: [
29+
{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
30+
]
31+
})
32+
----
33+
+
34+
35+
.. Load {productname} into the application's runtime global scope.
36+
* Open `+angular.json+` and add {productname} to the _global scripts_ tag.
37+
+
38+
[source,json]
39+
----
40+
"scripts": [
41+
"/<path_to_tinymce>/tinymce.min.js"
42+
]
43+
----
44+
45+
* Update the `+base_url+` and `+suffix+` options to configurate the location of other components like skins, icons, plugins, etc.
46+
+
47+
[source,ts]
48+
----
49+
export class AppComponent {
50+
/* ... */
51+
init: EditorComponent['init'] = {
52+
/* ... */
53+
base_url: '/tinymce', // Root for resources
54+
suffix: '.min' // Suffix to use when loading resources
55+
};
56+
}
57+
----
58+
+

0 commit comments

Comments
 (0)