Bundling an npm version of TinyMCE with ES6 and Vite
The following procedure will assist with bundling a npm version of TinyMCE with Vite using ES6+ syntax. The procedure assumes the user has experience with Vite and ES6+ syntax. The following steps provide a working example for bundling a basic TinyMCE configuration with Vite, and provides links to reference pages at the end of the procedure for bundling additional customizations with the editor.
If TinyMCE will be used with a JavaScript framework (such as React.js, Angular, or Vue.js) the bundle will also require the relevant framework integration package (where available). For a list of supported framework integrations, see: Installing TinyMCE.
Requirements
This guide requires the following:
-
Node.js and npm.
-
Basic knowledge of how to use Vite.
-
For self-hosted deployments: A valid license key starting with
T8LK:
from your Tiny Account -
(Optional: For premium features) The latest premium .zip bundle of TinyMCE that includes premium plugins.
When self-hosting TinyMCE 8:
|
Procedures
-
Create scaffolding for your project.
npm create vite@5 . && npm install tinymce
-
Or add
tinymce
and the following development dependencies to your existing project.-
For example:
npm install tinymce && npm install --save-dev vite
-
-
Create a new source file for importing the required components from TinyMCE and configuring the editor.
The following components are required to bundle TinyMCE:
-
The
tinymce
global -
The
silver
theme -
The
dom
model -
The
default
icon pack. This is always required and provides the base set of icons for all TinyMCE functionality. The default icons can be extended or overridden using additional icon packs. -
A skin for styling the user interface, including toolbars and menus. This can be a community, premium or custom skin.
-
A content skin for styling UI features within the content such as table and image resizing. This can be a community, premium or custom skin.
The global must be first, the rest can be in any order.
Additional components that are optional but recommended:
-
Content CSS for styling editor content. There are community and premium style skins available, or use custom content CSS.
-
Plugins to be used with the editor.
-
A custom or premium icon pack to extend or override the default icons for toolbar buttons, including contextual toolbars. This can be a premium or custom icon pack.
-
This example will only work for TinyMCE 6.8.0 and later. |
Example src/editor.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/<plugincode>'; */
/* 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';
/* Initialize TinyMCE */
export function render () {
tinymce.init({
selector: 'textarea#editor',
license_key: 'gpl',
plugins: 'advlist code emoticons link lists table',
toolbar: 'bold italic | bullist numlist | link emoticons',
skin_url: 'default',
content_css: 'default',
});
};
-
Add the TinyMCE assets and configuration into the project and provide a target element to initialize the editor.
Example
src/index.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();
-
Import the index.js file in the index.html page, such as:
<!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
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 TinyMCE into an existing project.
-
-
Run vite in production mode to generate the bundle
npx vite build
-
If vite runs successfully, check that it generated by running:
npx vite preview
Next Steps
For information on:
-
Adding TinyMCE plugins to the bundle, see: Bundling TinyMCE plugins using module loading.
-
Using editor content CSS provided by Tiny, including premium CSS included with the Enhanced Skins & Icon Packs, see: Bundling TinyMCE content CSS using module loading.
-
Creating custom editor content CSS, see: Content appearance options -
content_css
. -
Using TinyMCE skins provided by Tiny, including enhanced skins included with the Enhanced Skins & Icon Packs, see: Bundling TinyMCE skins using module loading.
-
Creating a custom skin for TinyMCE, see: Create a skin for TinyMCE.
-
Using icon packs provided by Tiny, including premium icons packs included with the Enhanced Skins & Icon Packs, see: Bundling TinyMCE icon packs using module loading.
-
Creating a custom icon pack for TinyMCE, see: Create an icon pack for TinyMCE.
-
Localizing the TinyMCE user interface using a language pack, see: Bundling the User Interface localizations for TinyMCE.