Skip to content

Commit 808d0dd

Browse files
kemister85tiny-ben-tran
kemister85
and
tiny-ben-tran
authored
DOC-2216: add new single js bundling feature example for Bundling an npm version of TinyMCE with ES6 and Vite. (#3010)
* DOC-2216: add new single bundling feature example for . * DOC-2216: fix rel path for bundling-vite-es6-npm.config.adoc. * DOC-2216: update , remove in shell commands, update scaffolding commands. * Update modules/ROOT/pages/vite-es6-npm.adoc * Update modules/ROOT/pages/vite-es6-npm.adoc * Update modules/ROOT/pages/vite-es6-npm.adoc * Update modules/ROOT/pages/vite-es6-npm.adoc Co-authored-by: tiny-ben-tran <[email protected]> * Update modules/ROOT/pages/vite-es6-npm.adoc Co-authored-by: tiny-ben-tran <[email protected]> * Update modules/ROOT/pages/vite-es6-npm.adoc Co-authored-by: tiny-ben-tran <[email protected]> * Update modules/ROOT/pages/vite-es6-npm.adoc Co-authored-by: tiny-ben-tran <[email protected]> * Update modules/ROOT/pages/vite-es6-npm.adoc Co-authored-by: tiny-ben-tran <[email protected]> * DOC-2216: various updates including; naming convention update for file update sh commands included example for importing premium skins * Update modules/ROOT/pages/vite-es6-npm.adoc --------- Co-authored-by: tiny-ben-tran <[email protected]>
1 parent 805f279 commit 808d0dd

File tree

7 files changed

+187
-1
lines changed

7 files changed

+187
-1
lines changed

‎changelog.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ The format is loosely based on [Keep a Changelog](https://keepachangelog.com/en/
66

77
### Unreleased
88

9+
- DOC-2216: add new single `js` bundling feature example for `Bundling an npm version of TinyMCE with ES6 and Vite`.
910
- DOC-2202: add new `bespoke` button text updates to `events.adoc` file.
1011
- DOC-2209: add new default_font_stack `user-formatting-option.adoc` file.
1112

‎modules/ROOT/nav.adoc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,8 @@
195195
**** xref:webpack-cjs-npm.adoc[CommonJS and npm]
196196
**** xref:webpack-es6-download.adoc[ES6 and a .zip archive]
197197
**** xref:webpack-cjs-download.adoc[CommonJS and a .zip archive]
198+
*** Vite
199+
**** xref:vite-es6-npm.adoc[ES6 and npm]
198200
*** Rollup.js
199201
**** xref:rollup-es6-npm.adoc[ES6 and npm]
200202
**** xref:rollup-es6-download.adoc[ES6 and a .zip archive]

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ The following guides and reference pages assist with bundling {productname} usin
1313
* xref:webpack-es6-download.adoc[ES6 and a .zip archive]
1414
* xref:webpack-cjs-download.adoc[CommonJS and a .zip archive]
1515

16+
== Vite
17+
18+
* xref:vite-es6-npm.adoc[Vite, ES6 and npm]
19+
1620
[[rollupjs]]
1721
== Rollup.js
1822

‎modules/ROOT/pages/vite-es6-npm.adoc‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
= Bundling an npm version of TinyMCE with ES6 and Vite
2+
:navtitle: ES6 and npm
3+
:description_short: Bundling an npm version of TinyMCE in a project using ES6 and Vite
4+
:description: Bundling an npm version of TinyMCE in a project using ES6 and Vite
5+
:keywords: vite, es6, es2015, npm, modules, tinymce
6+
:installtype: a npm
7+
:bundler: https://vitejs.dev[Vite]
8+
:syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules[ES6+ syntax]
9+
10+
include::partial$module-loading/bundling-procedure-intro.adoc[]
11+
12+
== Requirements
13+
14+
This guide requires the following:
15+
16+
* Node.js and npm.
17+
* Basic knowledge of how to use https://vitejs.dev[Vite].
18+
* (Optional: For premium features) The latest premium .zip bundle of TinyMCE that includes premium plugins.
19+
20+
== Procedures
21+
22+
:is_zip_install: vite
23+
// use new vite dev-dependencies
24+
include::partial$module-loading/webpack-dev-dependencies.adoc[]
25+
26+
include::partial$module-loading/bundling-vite-es6-npm_editor.adoc[]
27+
28+
NOTE: If using {productname} premium skins, run **`@tiny-premium/oxide-premium-skins`** to install the dependency's.
29+
30+
include::partial$module-loading/bundling-vite-es6-npm_config.adoc[]
31+
32+
. Import the index.js file in the index.html page, such as:
33+
+
34+
[source,html]
35+
----
36+
<!doctype html>
37+
<html lang="en">
38+
39+
<head>
40+
<meta charset="UTF-8" />
41+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
42+
<title>Vite App</title>
43+
</head>
44+
45+
<body>
46+
<script type="module" src="/src/index.js"></script>
47+
</body>
48+
49+
</html>
50+
----
51+
+
52+
. Run vite in dev mode to test the application
53+
+
54+
[source,sh]
55+
----
56+
npx vite dev
57+
----
58+
+
59+
. If Vite
60+
.. **runs** successfully, check that the editor loads in the application.
61+
.. **fails**, review any errors and the configuration changes in this procedure; you may need to adjust for conflicts or other issues when bundling {productname} into an existing project.
62+
. Run vite in production mode to generate the bundle
63+
+
64+
[source,sh]
65+
----
66+
npx vite build
67+
----
68+
+
69+
. If vite runs successfully, check that it generated by running:
70+
+
71+
[source,sh]
72+
----
73+
npx vite preview
74+
----
75+
:!is_zip_install:
76+
77+
include::partial$module-loading/bundling-next-steps.adoc[]

‎modules/ROOT/partials/module-loading/bundling-vite-es6-npm_config.adoc‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
. Add the {productname} assets and configuration into the project and provide a target element to initialize the editor.
2+
+
3+
Example `+src/index.js+`
4+
+
5+
[source,js]
6+
----
7+
import * as editor from './editor';
8+
9+
const heading = () => {
10+
const element = document.createElement('h1');
11+
element.innerText = 'TinyMCE Vite demo';
12+
return element;
13+
};
14+
15+
const editorArea = () => {
16+
const element = document.createElement('textarea');
17+
element.id = 'editor';
18+
return element;
19+
};
20+
21+
const parent = document.createElement('p');
22+
parent.appendChild(editorArea());
23+
document.body.appendChild(heading());
24+
document.body.appendChild(parent);
25+
26+
editor.render();
27+
----

‎modules/ROOT/partials/module-loading/bundling-vite-es6-npm_editor.adoc‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
. Create a new source file for importing the required components from {productname} and configuring the editor.
2+
+
3+
include::partial$module-loading/bundling-required-components.adoc[]
4+
+
5+
Example `+src/editor.js+`
6+
+
7+
[source,js]
8+
----
9+
/* Import TinyMCE */
10+
import tinymce from 'tinymce';
11+
12+
/* Default icons are required. After that, import custom icons if applicable */
13+
import 'tinymce/icons/default/icons.min.js';
14+
15+
/* Required TinyMCE components */
16+
import 'tinymce/themes/silver/theme.min.js';
17+
import 'tinymce/models/dom/model.min.js';
18+
19+
/* Import a skin (can be a custom skin instead of the default) */
20+
import 'tinymce/skins/ui/oxide/skin.js';
21+
22+
/* Import plugins */
23+
import 'tinymce/plugins/advlist';
24+
import 'tinymce/plugins/code';
25+
import 'tinymce/plugins/emoticons';
26+
import 'tinymce/plugins/emoticons/js/emojis';
27+
import 'tinymce/plugins/link';
28+
import 'tinymce/plugins/lists';
29+
import 'tinymce/plugins/table';
30+
31+
/* Import premium plugins */
32+
/* NOTE: Download separately and add these to /src/plugins */
33+
/* import './plugins/checklist/plugin.js'; */
34+
/* import './plugins/powerpaste/plugin.js'; */
35+
/* import './plugins/powerpaste/js/wordimport.js'; */
36+
37+
/* content UI CSS is required */
38+
import contentUiSkinCss from 'tinymce/skins/ui/oxide/content.js';
39+
40+
/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
41+
import contentCss from 'tinymce/skins/content/default/content.js';
42+
43+
/* Import Premium Skins can be changes by uncommenting the below example and updating the skin_url and content_css values */
44+
/* import '@tiny-premium/oxide-premium-skins/build/skins/ui/material-outline/skin.js' */
45+
/* import '@tiny-premium/oxide-premium-skins/build/skins/ui/material-outline/content.js' */
46+
/* import '@tiny-premium/oxide-premium-skins/build/skins/content/material-outline/content.js' */
47+
48+
/* Initialize TinyMCE */
49+
export function render () {
50+
tinymce.init({
51+
selector: 'textarea#editor',
52+
plugins: 'advlist code emoticons link lists table',
53+
toolbar: 'bold italic | bullist numlist | link emoticons',
54+
skin_url: 'default', /* material-outline */
55+
content_css: 'default', /* material-outline */
56+
});
57+
};
58+
----

‎modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ npm install --save-dev \
1919
----
2020

2121
endif::[]
22-
ifeval::[{is_zip_install} != true]
22+
ifeval::[{is_zip_install} != true && != vite]
2323
. Add `+tinymce+` and the following development dependencies to the project.
2424
* https://www.npmjs.com/package/webpack[`+webpack+`]
2525
* https://www.npmjs.com/package/webpack-cli[`+webpack-cli+`]
@@ -41,3 +41,20 @@ npm install --save-dev \
4141
----
4242

4343
endif::[]
44+
ifeval::[{is_zip_install} == vite]
45+
. Create scaffolding for your project.
46+
+
47+
[source,sh]
48+
----
49+
npm create vite@5 . && npm install tinymce
50+
----
51+
+
52+
. Or add `+tinymce+` and the following development dependencies to your existing project.
53+
* https://vitejs.dev[`+Vite+`]
54+
+
55+
For example:
56+
+
57+
[source,sh]
58+
----
59+
npm install tinymce && npm install --save-dev vite
60+
----

0 commit comments

Comments
 (0)