Skip to content

Commit 367992d

Browse files
committed
Correct instructions for Angular zip package
1 parent 080c4b6 commit 367992d

File tree

2 files changed

+26
-51
lines changed

2 files changed

+26
-51
lines changed
Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,7 @@
11

22
+
3-
. There are two ways to add the {productname} into the application:
3+
. There are two options for including {productname} into the application:
44
.. Lazy load {productname} using the provided `TINYMCE_SCRIPT_SRC` dependency provider.
5-
* Add {productname} to the `+assets+` configuration in `+angular.json+`. This will make {productname} available as a static asset to the application.
6-
+
7-
[source,json]
8-
----
9-
"assets": [
10-
{
11-
"glob": "**/*",
12-
"input": "node_modules/tinymce",
13-
"output": "/tinymce/"
14-
}
15-
]
16-
----
17-
18-
* Update the component's dependency providers.
195
+
206
[source,ts]
217
----
@@ -26,22 +12,34 @@ import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
2612
standalone: true,
2713
imports: [EditorComponent],
2814
providers: [
29-
{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }
15+
{ provide: TINYMCE_SCRIPT_SRC, useValue: '/tinymce/tinymce.min.js' }
3016
]
3117
})
3218
----
3319
34-
.. Load {productname} into the application's runtime global scope.
35-
* Open `+angular.json+` and add {productname} to the _global scripts_ tag.
20+
.. Add {productname} to the _global scripts_ tag via `+angular.json+`.
3621
+
3722
[source,json]
3823
----
3924
"scripts": [
40-
"/<path_to_tinymce>/tinymce.min.js"
25+
"<path_to_source_tinymce>/tinymce.min.js"
4126
]
4227
----
4328
44-
* Update the `+base_url+` and `+suffix+` options to configurate the location of other components like skins, icons, plugins, etc.
29+
. Then update `+angular.json+` to include {productname} and other components as `+assets+`. This will make them available to the application.
30+
+
31+
[source,json]
32+
----
33+
"assets": [
34+
{
35+
"glob": "**/*",
36+
"input": "<path_to_source_tinymce>/tinymce",
37+
"output": "/tinymce"
38+
}
39+
]
40+
----
41+
42+
. Update the `+base_url+` and `+suffix+` options to configurate the location of other components like skins, icons, plugins, etc.
4543
+
4644
[source,ts]
4745
----
@@ -53,4 +51,4 @@ export class AppComponent {
5351
suffix: '.min' // Suffix to use when loading resources
5452
};
5553
}
56-
----
54+
----

modules/ROOT/partials/integrations/angular-quick-start.adoc

Lines changed: 7 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ This procedure requires https://nodejs.org/[Node.js (and NPM)].
1010

1111
== Procedure
1212

13-
--
1413
. From a terminal or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] globally.
1514
+
1615
[source,sh]
@@ -50,12 +49,10 @@ ifeval::["{productSource}" != "package-manager"]
5049
----
5150
npm install @tinymce/tinymce-angular
5251
----
53-
+
54-
5552
endif::[]
53+
5654
. Update the root component `+src/app/app.component.ts+` to import and use the `EditorComponent`.
5755
ifeval::["{productSource}" == "cloud"]
58-
5956
+
6057
[source,ts,subs="attributes+"]
6158
----
@@ -110,39 +107,19 @@ export class AppComponent {
110107
----
111108

112109
endif::[]
113-
ifeval::["{productSource}" == "package-manager"]
114-
include::partial$integrations/angular-load-tinymce-independently.adoc[]
110+
111+
ifeval::["{productSource}" == "zip"]
112+
. Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+src+` folder.
115113
endif::[]
114+
115+
include::partial$integrations/angular-load-tinymce-independently.adoc[]
116+
116117
. Run the Angular a development server
117118
+
118119
[source,sh]
119120
----
120121
ng serve
121122
----
122-
+
123-
124-
125-
ifeval::["{productSource}" == "package-manager"]
126-
[[angular-modules]]
127-
== Angular Modules
128-
`+EditorModule+` is available to import from `+@tinymce/tinymce-angular+`. Which should be included in your `+my.module.ts+` file.
129-
130-
[source,ts]
131-
----
132-
import { NgModule } from '@angular/core';
133-
import { EditorModule } from '@tinymce/tinymce-angular';
134-
135-
@NgModule({
136-
/* ... */
137-
imports: [
138-
EditorModule
139-
],
140-
/* ... */
141-
})
142-
export class MyModule {}
143-
----
144-
endif::[]
145-
146123

147124
== Next Steps
148125

0 commit comments

Comments
 (0)