Skip to content

Commit fa1a313

Browse files
tiny-ben-trantiny-ben-tran
committed
Add a page for angular zip bundle
1 parent 867a2e1 commit fa1a313

File tree

7 files changed

+139
-40
lines changed

7 files changed

+139
-40
lines changed

‎modules/ROOT/nav.adoc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
****** xref:react-zip-bundle.adoc[Using a .zip package with bundling]
5858
***** Angular
5959
****** xref:angular-zip.adoc[Using a .zip package]
60+
****** xref:angular-zip-bundle.adoc[Bundle TinyMCE from a .zip package]
6061
***** Vue.js
6162
****** xref:vue-zip.adoc[Using a .zip package]
6263
***** Blazor

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

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@
55
:productSource: package-manager
66
:packageName: @tinymce/tinymce-angular
77

8-
This guide shows how to integrate the NPM version of {productname} in an Angular application using a module bundler such as Vite.
9-
10-
For examples of the {productname} Angular integration, visit https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
8+
This guide shows how to integrate the NPM version of {productname} in an Angular application.
119

1210
== Prerequisites
1311

@@ -36,8 +34,8 @@ ng new --defaults --skip-git tinymce-angular-demo
3634
cd tinymce-angular-demo && npm install tinymce @tinymce/tinymce-angular
3735
----
3836

39-
+
40-
. Create `+src/app/editor.component.ts+`
37+
38+
. Create `+src/app/editor.component.ts+`.
4139
+
4240
[source,ts]
4341
----
@@ -112,21 +110,11 @@ import { MyEditorComponent } from './editor.component';
112110
export class AppComponent {}
113111
----
114112

115-
+
116113
. Run the Angular development server
117114
+
118115
[source,sh]
119116
----
120117
ng serve
121118
----
122119

123-
124-
== Next Steps
125-
126-
* For information on bundling, see: xref:introduction-to-bundling-tinymce.adoc[]
127-
* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
128-
* For information on customizing:
129-
** {productname} integration, see: xref:angular-ref.adoc[Angular framework Technical Reference].
130-
** {productname}, see: xref:basic-setup.adoc[Basic setup].
131-
** The Angular application, see: https://angular.dev[the Angular documentation].
132-
* For a complete example, see: https://github.com/tinymce/tinymce-angular-integration-examples/tree/self-hosted-with-npm-premium-plugins[the Angular bundling example repository].
120+
include::partial$integrations/angular-other-resources.adoc[]

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

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
= Bundling TinyMCE from .zip package in Angular
2+
:navtitle: Using a package manager with bundling
3+
:description: A guide on bundling TinyMCE from a .zip package in an Angular application.
4+
:keywords: integration, integrate, angular, bundle, vite, npm, tinymce
5+
:productSource: package-manager
6+
:packageName: @tinymce/tinymce-angular
7+
8+
This guide shows how to integrate {productname} from a `.zip` package in an Angular application.
9+
10+
== Prerequisites
11+
12+
This procedure requires https://nodejs.org/[Node.js (and NPM)].
13+
14+
== Procedure
15+
16+
. From a terminal or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] globally.
17+
+
18+
[source,sh]
19+
----
20+
npm install -g @angular/cli
21+
----
22+
23+
. Create a new Angular project named `+tinymce-angular-demo+`.
24+
+
25+
[source,sh]
26+
----
27+
ng new --defaults --skip-git tinymce-angular-demo
28+
----
29+
30+
. Go to the new project directory and `+@tinymce/tinymce-angular+`.
31+
+
32+
[source,sh]
33+
----
34+
cd tinymce-angular-demo && npm install @tinymce/tinymce-angular
35+
----
36+
37+
. Unzip the content of the `+tinymce/js+` folder from the link:{download-enterprise}[{productname} zip] into the `+src+` folder.
38+
39+
. Create `+src/app/editor.component.ts+` with the following:
40+
+
41+
[source,ts]
42+
----
43+
import { Component } from '@angular/core';
44+
import { EditorComponent } from '@tinymce/tinymce-angular';
45+
46+
// Ensure you import TinyMCE to register the global variable required by other components
47+
import '../tinymce/tinymce';
48+
// DOM model
49+
import '../tinymce/models/dom/model';
50+
// Theme
51+
import '../tinymce/themes/silver';
52+
// Toolbar icons
53+
import '../tinymce/icons/default';
54+
// Editor styles
55+
import '../tinymce/skins/ui/oxide/skin.js';
56+
// Content styles, including inline UI like fake cursors
57+
import '../tinymce/skins/content/default/content.js';
58+
import '../tinymce/skins/ui/oxide/content.js';
59+
60+
// Import plugins
61+
import '../tinymce/plugins/advlist';
62+
import '../tinymce/plugins/autolink';
63+
import '../tinymce/plugins/link';
64+
import '../tinymce/plugins/image';
65+
import '../tinymce/plugins/lists';
66+
import '../tinymce/plugins/table';
67+
import '../tinymce/plugins/code';
68+
import '../tinymce/plugins/help';
69+
// Include resources that a plugin lazy-loads at the run-time
70+
import '../tinymce/plugins/help/js/i18n/keynav/en.js';
71+
import '../tinymce/plugins/wordcount';
72+
73+
@Component({
74+
selector: 'app-editor',
75+
standalone: true,
76+
imports: [EditorComponent],
77+
template: `
78+
<editor
79+
[init]="init"
80+
licenseKey="gpl"
81+
/>
82+
`
83+
})
84+
export class MyEditorComponent {
85+
init: EditorComponent['init'] = {
86+
height: 500,
87+
plugins: 'advlist autolink lists link image table code help wordcount',
88+
toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | bullist numlist | help'
89+
};
90+
}
91+
----
92+
93+
. Update `+src/app/app.component.ts+` to use `MyEditorComponent`.
94+
+
95+
[source,ts]
96+
----
97+
import { Component } from '@angular/core';
98+
import { MyEditorComponent } from './editor.component';
99+
100+
@Component({
101+
selector: 'app-root',
102+
standalone: true,
103+
imports: [MyEditorComponent],
104+
template: `
105+
<h1>TinyMCE Angular Demo</h1>
106+
<app-editor />
107+
`
108+
})
109+
export class AppComponent {}
110+
----
111+
112+
. Run the Angular development server
113+
+
114+
[source,sh]
115+
----
116+
ng serve
117+
----
118+
119+
include::partial$integrations/angular-other-resources.adoc[]

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
= Using the {productname} from .zip package in Angular
1+
= Lazy-load {productname} from .zip package in Angular
22
:navtitle: Using a .zip package
33
: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.
7+
This guide shows how to self-host and lazy-load {productname} from a `.zip` package into an Angular application.
88

99
include::partial$integrations/angular-quick-start.adoc[]

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
2626
]
2727
----
2828
29-
. Then update `+angular.json+` to include {productname} and other components as `+assets+`. This will make them available to the application.
29+
. Then update `+angular.json+` to include {productname} and other components as `+assets+`. This will make them available to the application as static assets.
3030
+
3131
[source,json]
3232
----

‎modules/ROOT/partials/integrations/angular-other-resources.adoc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
== Other resources
2+
3+
* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
4+
* For guides on integrating {productname} premium plugins, see: xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins].
5+
* For information on customizing:
6+
** {productname} integration, see: xref:angular-ref.adoc[Angular framework Technical Reference].
7+
** {productname}, see: xref:basic-setup.adoc[Basic setup].
8+
** The Angular application, see: https://angular.dev[the Angular documentation].

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

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22

33
The steps below use standalone components. If using Angular Modules, see xref:angular-modules[Angular Modules].
44

5-
For more examples of the {productname} Angular integration, visit https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
6-
75
== Prerequisites
86

97
This procedure requires https://nodejs.org/[Node.js (and NPM)].
@@ -16,21 +14,21 @@ This procedure requires https://nodejs.org/[Node.js (and NPM)].
1614
----
1715
npm install -g @angular/cli
1816
----
19-
+
17+
2018
. Create a new Angular project named `+tinymce-angular-demo+` using default settings and without Git initialization.
2119
+
2220
[source,sh]
2321
----
2422
ng new --defaults --skip-git tinymce-angular-demo
2523
----
26-
+
24+
2725
. Move into the project directory and install `+tinymce-angular+`.
2826
+
2927
[source,sh]
3028
----
3129
cd tinymce-angular-demo && npm install @tinymce/tinymce-angular
3230
----
33-
+
31+
3432
ifeval::["{productSource}" == "package-manager"]
3533

3634
. Install the `+tinymce+`.
@@ -41,15 +39,6 @@ npm install tinymce
4139
----
4240
+
4341
endif::[]
44-
ifeval::["{productSource}" != "package-manager"]
45-
46-
. Install the `+tinymce-angular+` package.
47-
+
48-
[source,sh]
49-
----
50-
npm install @tinymce/tinymce-angular
51-
----
52-
endif::[]
5342

5443
. Update the root component `+src/app/app.component.ts+` to import and use the `EditorComponent`.
5544
ifeval::["{productSource}" == "cloud"]
@@ -121,10 +110,4 @@ include::partial$integrations/angular-load-tinymce-independently.adoc[]
121110
ng serve
122111
----
123112

124-
== Next Steps
125-
126-
* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
127-
* For information on customizing:
128-
** {productname} integration, see: xref:angular-ref.adoc[Angular framework Technical Reference].
129-
** {productname}, see: xref:basic-setup.adoc[Basic setup].
130-
** The Angular application, see: https://angular.dev[the Angular documentation].
113+
include::partial$integrations/angular-other-resources.adoc[]

0 commit comments

Comments
 (0)