Skip to content

Commit 3fe2719

Browse files
kemister85kemister85
committed
DOC-3329: Add missing bundling guides for svelte, vue, angular, copy edits and suggested feedback/improvements.
1 parent 2b3ae1e commit 3fe2719

File tree

10 files changed

+550
-74
lines changed

10 files changed

+550
-74
lines changed

‎modules/ROOT/nav.adoc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,15 @@
2525
****** xref:react-pm-bundle.adoc[Using a package manager with bundling]
2626
***** Angular
2727
****** xref:angular-pm.adoc[Using a package manager]
28+
****** xref:angular-pm-bundle.adoc[Using a package manager with bundling]
2829
***** Vue.js
2930
****** xref:vue-pm.adoc[Using a package manager]
31+
****** xref:vue-pm-bundle.adoc[Using a package manager with bundling]
3032
***** Blazor
3133
****** xref:blazor-pm.adoc[Using a package manager]
3234
***** Svelte
3335
****** xref:svelte-pm.adoc[Using a package manager]
36+
****** xref:svelte-pm-bundle.adoc[Using a package manager with bundling]
3437
***** Web Component
3538
****** xref:webcomponent-pm.adoc[Using a package manager]
3639
***** xref:jquery-pm.adoc[jQuery]

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

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
= Bundling TinyMCE with an Angular application
2+
:navtitle: Using a package manager with bundling
3+
:description: A guide on bundling TinyMCE with an Angular application using a module loader.
4+
:keywords: integration, integrate, angular, bundle, webpack
5+
:productSource: package-manager
6+
7+
IMPORTANT: {companyname} does not recommend bundling `tinymce` and `@tinymce/tinymce-angular` with a module loader. Bundling these packages can be complex and error prone.
8+
9+
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.
10+
11+
For examples of the {productname} Angular integration, visit https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
12+
13+
== Prerequisites
14+
15+
This procedure requires https://nodejs.org/[Node.js (and npm)].
16+
17+
== Procedure
18+
19+
. On a command line or command prompt, install the link:https://angular.dev/tools/cli[Angular CLI Tool] package.
20+
+
21+
[source,sh]
22+
----
23+
npm install -g @angular/cli
24+
----
25+
. Create a new Angular project named `+tinymce-angular-demo+`.
26+
+
27+
[source,sh]
28+
----
29+
ng new --defaults --skip-git tinymce-angular-demo
30+
----
31+
. Change into the newly created directory.
32+
+
33+
[source,sh]
34+
----
35+
cd tinymce-angular-demo
36+
----
37+
. Install the `+tinymce+` and `+@tinymce/tinymce-angular+` packages.
38+
+
39+
[source,sh]
40+
----
41+
npm install tinymce @tinymce/tinymce-angular
42+
----
43+
+
44+
include::partial$integrations/premium-plugins-install-step-link.adoc[]
45+
+
46+
[NOTE]
47+
====
48+
For information on configuring premium plugins when bundling, see: xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins].
49+
====
50+
+
51+
. Using a text editor, create `+src/app/editor.component.ts+` and set the contents to:
52+
+
53+
[source,ts]
54+
----
55+
import { Component } from '@angular/core';
56+
import { EditorComponent } from '@tinymce/tinymce-angular';
57+
58+
// TinyMCE so the global var exists
59+
import 'tinymce/tinymce';
60+
// DOM model
61+
import 'tinymce/models/dom/model';
62+
// Theme
63+
import 'tinymce/themes/silver';
64+
// Toolbar icons
65+
import 'tinymce/icons/default';
66+
// Editor styles
67+
import 'tinymce/skins/ui/oxide/skin.min.css';
68+
69+
// Import plugins
70+
import 'tinymce/plugins/advlist';
71+
import 'tinymce/plugins/autolink';
72+
import 'tinymce/plugins/link';
73+
import 'tinymce/plugins/image';
74+
import 'tinymce/plugins/lists';
75+
import 'tinymce/plugins/table';
76+
import 'tinymce/plugins/code';
77+
import 'tinymce/plugins/help';
78+
import 'tinymce/plugins/wordcount';
79+
80+
include::partial$integrations/premium-plugins-bundling.adoc[]
81+
82+
// Content styles, including inline UI like fake cursors
83+
import 'tinymce/skins/content/default/content.js';
84+
import 'tinymce/skins/ui/oxide/content.js';
85+
86+
@Component({
87+
selector: 'app-editor',
88+
standalone: true,
89+
imports: [EditorComponent],
90+
template: `
91+
<editor
92+
[init]="init"
93+
licenseKey="gpl"
94+
/>
95+
`
96+
})
97+
export class MyEditorComponent {
98+
init: EditorComponent['init'] = {
99+
height: 500,
100+
menubar: false,
101+
plugins: 'advlist autolink lists link image table code help wordcount',
102+
toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | bullist numlist | help'
103+
};
104+
}
105+
----
106+
+
107+
. Using a text editor, open `+src/app/app.component.ts+` and update it to use the editor component:
108+
+
109+
[source,ts]
110+
----
111+
import { Component } from '@angular/core';
112+
import { MyEditorComponent } from './editor.component';
113+
114+
@Component({
115+
selector: 'app-root',
116+
standalone: true,
117+
imports: [MyEditorComponent],
118+
template: `
119+
<h1>TinyMCE Angular Demo</h1>
120+
<app-editor />
121+
`
122+
})
123+
export class AppComponent {}
124+
----
125+
+
126+
. Run `+ng serve+` to start a dev server
127+
+
128+
[source,sh]
129+
----
130+
ng serve
131+
----
132+
+
133+
The development server will automatically bundle your application, including TinyMCE, when you access it in your browser. The bundler processes all the `import` statements and includes the {productname} modules in the development bundle.
134+
135+
. Build the application for production:
136+
+
137+
[source,sh]
138+
----
139+
ng build
140+
----
141+
+
142+
This command creates an optimized production bundle in the `+dist+` directory.
143+
144+
. Update the `+licenseKey+` option in the editor component and include your xref:license-key.adoc[License Key].
145+
146+
== Next Steps
147+
148+
* For information on bundling, see: xref:introduction-to-bundling-tinymce.adoc[]
149+
* For examples of the {productname} integration, see: https://tinymce.github.io/tinymce-angular/[the tinymce-angular storybook].
150+
* For information on customizing:
151+
** {productname} integration, see: xref:angular-ref.adoc[Angular framework Technical Reference].
152+
** {productname}, see: xref:basic-setup.adoc[Basic setup].
153+
** The Angular application, see: https://angular.dev[the Angular documentation].
154+
* 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].

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
= Bundling the TinyMCE package with the React framework
1+
= Bundle with TinyMCE and the React framework
22
:navtitle: Using a package manager with bundling
33
:description: A guide on integrating the TinyMCE package into the React framework by bundling it.
44
:keywords: integration, integrate, react, reactjs, vite, tinymce-react, bundle

‎modules/ROOT/pages/react-pm-host.adoc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
= Hosting the TinyMCE package with the React framework
1+
= Lazy load TinyMCE with the React framework
22
:page-aliases: react-pm.adoc
33
:navtitle: Using a package manager with hosting
44
:description: A guide on integrating the TinyMCE package into the React framework by self-hosting it.

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

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
= Bundling TinyMCE with a Svelte application
2+
:navtitle: Using a package manager with bundling
3+
:description: A guide on bundling TinyMCE with a Svelte application using a module loader.
4+
:keywords: integration, integrate, svelte, bundle, vite
5+
:productSource: package-manager
6+
7+
IMPORTANT: {companyname} does not recommend bundling `tinymce` and `@tinymce/tinymce-svelte` with a module loader. Bundling these packages can be complex and error prone.
8+
9+
The https://github.com/tinymce/tinymce-svelte[Official {productname} Svelte component] integrates {productname} into https://svelte.dev/[Svelte applications]. This procedure creates a basic Svelte application containing a bundled {productname} editor.
10+
11+
For examples of the {productname} integration, visit the https://tinymce.github.io/tinymce-svelte/[tinymce-svelte storybook].
12+
13+
== Prerequisites
14+
15+
Requires https://nodejs.org/[Node.js (and npm)].
16+
17+
== Procedure
18+
19+
. Use the https://github.com/vitejs/vite[Vite] package to create a new Svelte project named `+tinymce-svelte-demo+`, such as:
20+
+
21+
[source,sh]
22+
----
23+
npm create vite@6 tinymce-svelte-demo -- --template svelte
24+
----
25+
. Change to the project directory.
26+
+
27+
[source,sh]
28+
----
29+
cd tinymce-svelte-demo
30+
----
31+
. Install project dependencies.
32+
+
33+
[source,sh]
34+
----
35+
npm install
36+
----
37+
. Install the `+tinymce+` and `+tinymce-svelte+` packages:
38+
+
39+
[source,sh,subs="attributes+"]
40+
----
41+
npm install tinymce@^{productmajorversion} @tinymce/tinymce-svelte
42+
----
43+
44+
include::partial$integrations/premium-plugins-install-step-link.adoc[]
45+
+
46+
[NOTE]
47+
====
48+
For information on configuring premium plugins when bundling, see: xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins].
49+
====
50+
+
51+
. Using a text editor, create `+src/editor.js+` and set the contents to:
52+
+
53+
[source,js]
54+
----
55+
// Add the @tinymce/tinymce-svelte wrapper to the bundle
56+
import Editor from '@tinymce/tinymce-svelte';
57+
58+
// TinyMCE so the global var exists
59+
import 'tinymce/tinymce';
60+
// DOM model
61+
import 'tinymce/models/dom/model';
62+
// Theme
63+
import 'tinymce/themes/silver';
64+
// Toolbar icons
65+
import 'tinymce/icons/default';
66+
// Editor styles
67+
import 'tinymce/skins/ui/oxide/skin.min.css';
68+
69+
// Import plugins
70+
import 'tinymce/plugins/advlist';
71+
import 'tinymce/plugins/autolink';
72+
import 'tinymce/plugins/link';
73+
import 'tinymce/plugins/image';
74+
import 'tinymce/plugins/lists';
75+
import 'tinymce/plugins/table';
76+
import 'tinymce/plugins/code';
77+
import 'tinymce/plugins/help';
78+
import 'tinymce/plugins/wordcount';
79+
80+
include::partial$integrations/premium-plugins-bundling.adoc[]
81+
82+
// Content styles, including inline UI like fake cursors
83+
import 'tinymce/skins/content/default/content.js';
84+
import 'tinymce/skins/ui/oxide/content.js';
85+
86+
// Export Editor component for use in Svelte components
87+
export default Editor;
88+
----
89+
+
90+
. Using a text editor, open `+src/App.svelte+` and replace the contents with:
91+
+
92+
[source,svelte]
93+
----
94+
<script>
95+
import Editor from './editor.js';
96+
let content = '<p>This is the initial content of the editor.</p>';
97+
let conf = {
98+
height: 500,
99+
menubar: false,
100+
plugins: [
101+
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
102+
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
103+
'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount'
104+
],
105+
toolbar: 'undo redo | blocks | ' +
106+
'bold italic forecolor | alignleft aligncenter ' +
107+
'alignright alignjustify | bullist numlist outdent indent | ' +
108+
'removeformat | help',
109+
}
110+
</script>
111+
112+
<main>
113+
<h1>TinyMCE Svelte Demo</h1>
114+
<Editor
115+
licenseKey='gpl'
116+
value={content}
117+
conf={conf}
118+
/>
119+
</main>
120+
----
121+
+
122+
. Run the development server:
123+
+
124+
[source,sh]
125+
----
126+
npm run dev
127+
----
128+
+
129+
The development server uses Vite to bundle your application on-the-fly. Vite processes all the `import` statements and includes the TinyMCE modules in the development bundle.
130+
131+
. Build the application for production:
132+
+
133+
[source,sh]
134+
----
135+
npm run build
136+
----
137+
+
138+
This command creates an optimized production bundle in the `+dist+` directory.
139+
140+
. Preview the production build:
141+
+
142+
[source,sh]
143+
----
144+
npm run preview
145+
----
146+
+
147+
. Update the `+licenseKey+` property in the editor component and include your xref:license-key.adoc[License Key].
148+
149+
== Next Steps
150+
151+
* For information on bundling, see: xref:introduction-to-bundling-tinymce.adoc[]
152+
* See the following for additional information:
153+
** https://tinymce.github.io/tinymce-svelte/[tinymce-svelte storybook]
154+
** xref:basic-setup.adoc[{productname} basic setup]
155+
** xref:svelte-ref.adoc[{productname} Svelte integration technical reference]
156+
* For a complete example, see: https://github.com/tinymce/tinymce-svelte-integration-examples/tree/bundle_with_npm_premium_plugins[the Svelte bundling example repository].

0 commit comments

Comments
 (0)