Skip to content

Commit a47e2f4

Browse files
kemister85kemister85
committed
DOC-3329: Premium Plugins Installation and Bundling Documentation for NPM.
1 parent 7e98a33 commit a47e2f4

34 files changed

+837
-46
lines changed

‎modules/ROOT/pages/bundling-content-css.adoc‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Example syntax for including the example content CSS in a bundle:
1919
|===
2020
|Module Syntax |Source |Example
2121

22-
.2+|ES6+
22+
.2+|ES6+ (Webpack/Rollup)
2323
|npm
2424
a|
2525
[source, js]
@@ -34,6 +34,21 @@ a|
3434
import contentCSS from '../tinymce/skins/content/example/content.css';
3535
----
3636

37+
.2+|ES6+ (Vite)
38+
|npm
39+
a|
40+
[source, js]
41+
----
42+
import 'tinymce/skins/content/example/content.js';
43+
----
44+
45+
|`.zip`
46+
a|
47+
[source, js]
48+
----
49+
import '../tinymce/skins/content/example/content.js';
50+
----
51+
3752
.2+|Common JS
3853
|npm
3954
a|
@@ -49,6 +64,15 @@ a|
4964
const contentCSS = require('../tinymce/skins/content/example/content.css');
5065
----
5166
|===
52-
IMPORTANT: The handling of content CSS files (such as `+content.css+` or `+content.min.css+`) varies between bundling tools. View the relevant guide for the required syntax at xref:introduction-to-bundling-tinymce.adoc[Bundling {productname} with a module loader].
67+
68+
[IMPORTANT]
69+
====
70+
The handling of content CSS files varies between bundling tools:
71+
72+
* **Webpack/Rollup**: Import the `.css` file as a variable and use `+content_style+` option (e.g., `+content_style: contentCSS.toString()+`).
73+
* **Vite**: Import the `.js` file as a side-effect and use `+content_css+` option with a string value (e.g., `+content_css: 'example'+`).
74+
75+
View the relevant guide for the required syntax at xref:introduction-to-bundling-tinymce.adoc[Bundling {productname} with a module loader].
76+
====
5377

5478
include::partial$module-loading/bundling-content-css-files.adoc[]

‎modules/ROOT/pages/bundling-plugins.adoc‎

Lines changed: 123 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,39 +15,155 @@ include::partial$plugin-files/plugin-file-index.js.adoc[]
1515

1616
Example syntax for including the example "<plugincode>" plugin in a bundle using `content.js`for bundling:
1717

18-
[cols='1,1,4']
18+
[cols='1,2,3']
1919
|===
2020
|Module Syntax |Source |Example
2121

22-
.2+|ES6+
23-
|npm
22+
.4+|ES6+
23+
|npm (community plugins)
2424
a|
2525
[source, js]
2626
----
2727
import 'tinymce/plugins/<plugincode>';
2828
----
2929

30-
|`.zip`
30+
|npm (premium plugins)
31+
a|
32+
[source, js]
33+
----
34+
import 'tinymce-premium/plugins/<plugincode>';
35+
----
36+
37+
|`.zip` (community plugins)
3138
a|
3239
[source, js]
3340
----
3441
import '../tinymce/plugins/<plugincode>';
3542
----
3643

37-
.2+|Common JS
38-
|npm
44+
|`.zip` (premium plugins)
45+
a|
46+
[source, js]
47+
----
48+
import '../tinymce-premium/plugins/<plugincode>';
49+
----
50+
51+
.4+|Common JS
52+
|npm (community plugins)
3953
a|
4054
[source, js]
4155
----
4256
require('tinymce/plugins/<plugincode>');
4357
----
4458

45-
|`.zip`
59+
|npm (premium plugins)
60+
a|
61+
[source, js]
62+
----
63+
require('tinymce-premium/plugins/<plugincode>');
64+
----
65+
66+
|`.zip` (community plugins)
4667
a|
4768
[source, js]
4869
----
4970
require('../tinymce/plugins/<plugincode>');
5071
----
72+
73+
|`.zip` (premium plugins)
74+
a|
75+
[source, js]
76+
----
77+
require('../tinymce-premium/plugins/<plugincode>');
78+
----
5179
|===
5280

81+
[NOTE]
82+
====
83+
When using `+import tinymce from 'tinymce'+`, import only the individual premium plugins from `+tinymce-premium+` (e.g., `+import 'tinymce-premium/plugins/advcode'+`). Do not import the `+tinymce-premium+` package. The plugins automatically register with the {productname} instance.
84+
====
85+
86+
[[using-premium-plugins]]
87+
== Using premium plugins
88+
89+
After installing the `+tinymce-premium+` package, you need to configure the plugins in your editor. There are two main approaches:
90+
91+
=== Bundling (Recommended)
92+
93+
For most modern applications, bundling premium plugins is recommended. This includes the plugin code directly in your application bundle.
94+
95+
. Import the premium plugins you need:
96+
+
97+
[source,js]
98+
----
99+
import 'tinymce-premium/plugins/advcode';
100+
import 'tinymce-premium/plugins/licensekeymanager';
101+
import 'tinymce-premium/plugins/tinycomments';
102+
----
103+
104+
. Add the plugins to your editor configuration:
105+
+
106+
[source,js]
107+
----
108+
tinymce.init({
109+
selector: 'textarea',
110+
license_key: 'T8LK:...', // Your commercial license key
111+
plugins: 'advcode tinycomments',
112+
// ... other configuration
113+
});
114+
----
115+
116+
For complete bundling examples, see the <<Contents>> section below.
117+
118+
=== Using external_plugins (Non-bundling)
119+
120+
When bundling is not available or you want to lazy-load plugins, use the `+external_plugins+` option:
121+
122+
[source,js]
123+
----
124+
tinymce.init({
125+
selector: 'textarea',
126+
license_key: 'T8LK:...', // Your commercial license key
127+
external_plugins: {
128+
'advcode': '/node_modules/tinymce-premium/plugins/advcode/plugin.min.js',
129+
'licensekeymanager': '/node_modules/tinymce-premium/plugins/licensekeymanager/plugin.min.js',
130+
'tinycomments': '/node_modules/tinymce-premium/plugins/tinycomments/plugin.min.js'
131+
},
132+
plugins: 'advcode tinycomments',
133+
// ... other configuration
134+
});
135+
----
136+
137+
[NOTE]
138+
====
139+
The `+external_plugins+` option supports three URL formats:
140+
141+
* Absolute URLs (e.g., `+https://cdn.example.com/...`)
142+
* Relative to web-server root (e.g., `+/node_modules/...`)
143+
* Relative to {productname} `+base_url+` (e.g., `+../../node_modules/...`)
144+
145+
For more information, see: xref:editor-important-options.adoc#external_plugins[`+external_plugins+` configuration option].
146+
====
147+
148+
=== License key manager
149+
150+
[IMPORTANT]
151+
====
152+
Always include the `+licensekeymanager+` plugin when using premium plugins with a commercial license. The editor will not function properly without it. For more information, see: xref:license-key.adoc[License Key].
153+
====
154+
155+
When bundling:
156+
[source,js]
157+
----
158+
import 'tinymce-premium/plugins/licensekeymanager';
159+
----
160+
161+
When using `+external_plugins+`:
162+
[source,js]
163+
----
164+
external_plugins: {
165+
'licensekeymanager': '/node_modules/tinymce-premium/plugins/licensekeymanager/plugin.min.js'
166+
}
167+
----
168+
53169
include::partial$module-loading/bundling-plugin-files.adoc[]

‎modules/ROOT/pages/introduction-to-bundling-tinymce.adoc‎

Lines changed: 140 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,156 @@ The following guides and reference pages assist with bundling {productname} usin
88

99
== Webpack
1010

11-
* xref:webpack-es6-npm.adoc[ES6 and npm]
12-
* xref:webpack-cjs-npm.adoc[CommonJS and npm]
13-
* xref:webpack-es6-download.adoc[ES6 and a .zip archive]
14-
* xref:webpack-cjs-download.adoc[CommonJS and a .zip archive]
11+
[cols=2*a]
12+
|===
13+
14+
|
15+
[.lead]
16+
xref:webpack-es6-npm.adoc[Webpack - ES6 and npm]
17+
18+
Bundle {productname} with Webpack using ES6 modules and npm.
19+
20+
|
21+
[.lead]
22+
xref:webpack-cjs-npm.adoc[Webpack - CommonJS and npm]
23+
24+
Bundle {productname} with Webpack using CommonJS modules and npm.
25+
26+
|===
27+
28+
[cols=2*a]
29+
|===
30+
31+
|
32+
[.lead]
33+
xref:webpack-es6-download.adoc[Webpack - ES6 and .zip]
34+
35+
Bundle {productname} with Webpack using ES6 modules from a .zip archive.
36+
37+
|
38+
[.lead]
39+
xref:webpack-cjs-download.adoc[Webpack - CommonJS and .zip]
40+
41+
Bundle {productname} with Webpack using CommonJS modules from a .zip archive.
42+
43+
|===
1544

1645
== Vite
1746

18-
* xref:vite-es6-npm.adoc[Vite, ES6 and npm]
47+
[cols=2*a]
48+
|===
49+
50+
|
51+
[.lead]
52+
xref:vite-es6-npm.adoc[Vite - ES6 and npm]
53+
54+
Bundle {productname} with Vite using ES6 modules and npm for modern development workflows.
55+
56+
|
57+
58+
|===
1959

2060
[[rollupjs]]
2161
== Rollup.js
2262

23-
* xref:rollup-es6-npm.adoc[ES6 and npm]
24-
* xref:rollup-es6-download.adoc[ES6 and a .zip archive]
63+
[cols=2*a]
64+
|===
65+
66+
|
67+
[.lead]
68+
xref:rollup-es6-npm.adoc[Rollup.js - ES6 and npm]
69+
70+
Bundle {productname} with Rollup.js using ES6 modules and npm.
71+
72+
|
73+
[.lead]
74+
xref:rollup-es6-download.adoc[Rollup.js - ES6 and .zip]
75+
76+
Bundle {productname} with Rollup.js using ES6 modules from a .zip archive.
77+
78+
|===
2579

2680
== Browserify
2781

28-
* xref:browserify-cjs-npm.adoc[CommonJS and npm]
29-
* xref:browserify-cjs-download.adoc[CommonJS and a .zip archive]
82+
[cols=2*a]
83+
|===
84+
85+
|
86+
[.lead]
87+
xref:browserify-cjs-npm.adoc[Browserify - CommonJS and npm]
88+
89+
Bundle {productname} with Browserify using CommonJS modules and npm.
90+
91+
|
92+
[.lead]
93+
xref:browserify-cjs-download.adoc[Browserify - CommonJS and .zip]
94+
95+
Bundle {productname} with Browserify using CommonJS modules from a .zip archive.
96+
97+
|===
3098

3199
== Reference
32100

33-
* xref:bundling-plugins.adoc[Plugins]
34-
* xref:bundling-content-css.adoc[Content CSS]
35-
* xref:bundling-skins.adoc[Skins]
36-
* xref:bundling-icons.adoc[Icons]
37-
* xref:bundling-models.adoc[Models]
38-
* xref:bundling-localization.adoc[UI localizations]
39-
* xref:bundling-themes.adoc[Themes]
101+
[cols=2*a]
102+
|===
103+
104+
|
105+
[.lead]
106+
xref:bundling-plugins.adoc[Plugins]
107+
108+
Learn how to bundle {productname} plugins with your module loader.
109+
110+
|
111+
[.lead]
112+
xref:bundling-content-css.adoc[Content CSS]
113+
114+
Configure and bundle content CSS for {productname} editor content.
115+
116+
|===
117+
118+
[cols=2*a]
119+
|===
120+
121+
|
122+
[.lead]
123+
xref:bundling-skins.adoc[Skins]
124+
125+
Bundle and configure {productname} skins for custom editor appearance.
126+
127+
|
128+
[.lead]
129+
xref:bundling-icons.adoc[Icons]
130+
131+
Bundle and customize {productname} icon sets for your editor interface.
132+
133+
|===
134+
135+
[cols=2*a]
136+
|===
137+
138+
|
139+
[.lead]
140+
xref:bundling-models.adoc[Models]
141+
142+
Learn about bundling {productname} content models and data structures.
143+
144+
|
145+
[.lead]
146+
xref:bundling-localization.adoc[UI localizations]
147+
148+
Bundle and configure {productname} UI localizations for internationalization.
149+
150+
|===
151+
152+
[cols=2*a]
153+
|===
154+
155+
|
156+
[.lead]
157+
xref:bundling-themes.adoc[Themes]
158+
159+
Bundle and customize {productname} themes for your editor interface.
160+
161+
|
162+
163+
|===

0 commit comments

Comments
 (0)