Browse Source

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 <ben.tran@tiny.cloud>

* Update modules/ROOT/pages/vite-es6-npm.adoc

Co-authored-by: tiny-ben-tran <ben.tran@tiny.cloud>

* Update modules/ROOT/pages/vite-es6-npm.adoc

Co-authored-by: tiny-ben-tran <ben.tran@tiny.cloud>

* Update modules/ROOT/pages/vite-es6-npm.adoc

Co-authored-by: tiny-ben-tran <ben.tran@tiny.cloud>

* Update modules/ROOT/pages/vite-es6-npm.adoc

Co-authored-by: tiny-ben-tran <ben.tran@tiny.cloud>

* 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 <ben.tran@tiny.cloud>
pull/3022/head
Karl Kemister-Sheppard 2 years ago
committed by GitHub
parent
commit
808d0dd1b0
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      changelog.md
  2. 2
      modules/ROOT/nav.adoc
  3. 4
      modules/ROOT/pages/introduction-to-bundling-tinymce.adoc
  4. 77
      modules/ROOT/pages/vite-es6-npm.adoc
  5. 27
      modules/ROOT/partials/module-loading/bundling-vite-es6-npm_config.adoc
  6. 58
      modules/ROOT/partials/module-loading/bundling-vite-es6-npm_editor.adoc
  7. 19
      modules/ROOT/partials/module-loading/webpack-dev-dependencies.adoc

1
changelog.md

@ -6,6 +6,7 @@ The format is loosely based on [Keep a Changelog](https://keepachangelog.com/en/
### Unreleased
- DOC-2216: add new single `js` bundling feature example for `Bundling an npm version of TinyMCE with ES6 and Vite`.
- DOC-2202: add new `bespoke` button text updates to `events.adoc` file.
- DOC-2209: add new default_font_stack `user-formatting-option.adoc` file.

2
modules/ROOT/nav.adoc

@ -195,6 +195,8 @@
**** xref:webpack-cjs-npm.adoc[CommonJS and npm]
**** xref:webpack-es6-download.adoc[ES6 and a .zip archive]
**** xref:webpack-cjs-download.adoc[CommonJS and a .zip archive]
*** Vite
**** xref:vite-es6-npm.adoc[ES6 and npm]
*** Rollup.js
**** xref:rollup-es6-npm.adoc[ES6 and npm]
**** xref:rollup-es6-download.adoc[ES6 and a .zip archive]

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

@ -13,6 +13,10 @@ The following guides and reference pages assist with bundling {productname} usin
* xref:webpack-es6-download.adoc[ES6 and a .zip archive]
* xref:webpack-cjs-download.adoc[CommonJS and a .zip archive]
== Vite
* xref:vite-es6-npm.adoc[Vite, ES6 and npm]
[[rollupjs]]
== Rollup.js

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

@ -0,0 +1,77 @@
= Bundling an npm version of TinyMCE with ES6 and Vite
:navtitle: ES6 and npm
:description_short: Bundling an npm version of TinyMCE in a project using ES6 and Vite
:description: Bundling an npm version of TinyMCE in a project using ES6 and Vite
:keywords: vite, es6, es2015, npm, modules, tinymce
:installtype: a npm
:bundler: https://vitejs.dev[Vite]
:syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules[ES6+ syntax]
include::partial$module-loading/bundling-procedure-intro.adoc[]
== Requirements
This guide requires the following:
* Node.js and npm.
* Basic knowledge of how to use https://vitejs.dev[Vite].
* (Optional: For premium features) The latest premium .zip bundle of TinyMCE that includes premium plugins.
== Procedures
:is_zip_install: vite
// use new vite dev-dependencies
include::partial$module-loading/webpack-dev-dependencies.adoc[]
include::partial$module-loading/bundling-vite-es6-npm_editor.adoc[]
NOTE: If using {productname} premium skins, run **`@tiny-premium/oxide-premium-skins`** to install the dependency's.
include::partial$module-loading/bundling-vite-es6-npm_config.adoc[]
. Import the index.js file in the index.html page, such as:
+
[source,html]
----
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/index.js"></script>
</body>
</html>
----
+
. Run vite in dev mode to test the application
+
[source,sh]
----
npx vite dev
----
+
. If Vite
.. **runs** successfully, check that the editor loads in the application.
.. **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.
. Run vite in production mode to generate the bundle
+
[source,sh]
----
npx vite build
----
+
. If vite runs successfully, check that it generated by running:
+
[source,sh]
----
npx vite preview
----
:!is_zip_install:
include::partial$module-loading/bundling-next-steps.adoc[]

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

@ -0,0 +1,27 @@
. Add the {productname} assets and configuration into the project and provide a target element to initialize the editor.
+
Example `+src/index.js+`
+
[source,js]
----
import * as editor from './editor';
const heading = () => {
const element = document.createElement('h1');
element.innerText = 'TinyMCE Vite demo';
return element;
};
const editorArea = () => {
const element = document.createElement('textarea');
element.id = 'editor';
return element;
};
const parent = document.createElement('p');
parent.appendChild(editorArea());
document.body.appendChild(heading());
document.body.appendChild(parent);
editor.render();
----

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

@ -0,0 +1,58 @@
. Create a new source file for importing the required components from {productname} and configuring the editor.
+
include::partial$module-loading/bundling-required-components.adoc[]
+
Example `+src/editor.js+`
+
[source,js]
----
/* Import TinyMCE */
import tinymce from 'tinymce';
/* Default icons are required. After that, import custom icons if applicable */
import 'tinymce/icons/default/icons.min.js';
/* Required TinyMCE components */
import 'tinymce/themes/silver/theme.min.js';
import 'tinymce/models/dom/model.min.js';
/* Import a skin (can be a custom skin instead of the default) */
import 'tinymce/skins/ui/oxide/skin.js';
/* Import plugins */
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/code';
import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/emoticons/js/emojis';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
/* Import premium plugins */
/* NOTE: Download separately and add these to /src/plugins */
/* import './plugins/checklist/plugin.js'; */
/* import './plugins/powerpaste/plugin.js'; */
/* import './plugins/powerpaste/js/wordimport.js'; */
/* content UI CSS is required */
import contentUiSkinCss from 'tinymce/skins/ui/oxide/content.js';
/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
import contentCss from 'tinymce/skins/content/default/content.js';
/* Import Premium Skins can be changes by uncommenting the below example and updating the skin_url and content_css values */
/* import '@tiny-premium/oxide-premium-skins/build/skins/ui/material-outline/skin.js' */
/* import '@tiny-premium/oxide-premium-skins/build/skins/ui/material-outline/content.js' */
/* import '@tiny-premium/oxide-premium-skins/build/skins/content/material-outline/content.js' */
/* Initialize TinyMCE */
export function render () {
tinymce.init({
selector: 'textarea#editor',
plugins: 'advlist code emoticons link lists table',
toolbar: 'bold italic | bullist numlist | link emoticons',
skin_url: 'default', /* material-outline */
content_css: 'default', /* material-outline */
});
};
----

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

@ -19,7 +19,7 @@ npm install --save-dev \
----
endif::[]
ifeval::[{is_zip_install} != true]
ifeval::[{is_zip_install} != true && != vite]
. Add `+tinymce+` and the following development dependencies to the project.
* https://www.npmjs.com/package/webpack[`+webpack+`]
* https://www.npmjs.com/package/webpack-cli[`+webpack-cli+`]
@ -41,3 +41,20 @@ npm install --save-dev \
----
endif::[]
ifeval::[{is_zip_install} == vite]
. Create scaffolding for your project.
+
[source,sh]
----
npm create vite@5 . && npm install tinymce
----
+
. Or add `+tinymce+` and the following development dependencies to your existing project.
* https://vitejs.dev[`+Vite+`]
+
For example:
+
[source,sh]
----
npm install tinymce && npm install --save-dev vite
----
Loading…
Cancel
Save