--- title: "Bundling the TinyMCE .zip package with the React framework" description: "A guide on integrating a .zip version of TinyMCE into the React framework by bundling it." canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/react-zip-bundle/" md_url: "https://www.tiny.cloud/docs/tinymce/7/react-zip-bundle/index.md" version: "7" last_updated: "2025-05-14T11:34:04Z" tokens: 1874 --- Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/react-zip-bundle/). # Bundling the TinyMCE .zip package with the React framework > **Important:** Tiny does not recommend bundling the `tinymce` package. Bundling TinyMCE can be complex and error prone. The [Official TinyMCE React component](https://github.com/tinymce/tinymce-react) integrates TinyMCE into React projects. This procedure creates a [basic React application](https://github.com/vitejs/vite-plugin-react-swc) containing a TinyMCE editor. For examples of the TinyMCE integration, visit [the tinymce-react storybook](https://tinymce.github.io/tinymce-react/). ## Prerequisites This procedure requires [Node.js (and npm)](https://nodejs.org/). ## Procedure 1. Use the [Vite](https://github.com/vitejs/vite) package and the [React SWC plugin](https://github.com/vitejs/vite-plugin-react-swc) to create a new React project named `tinymce-react-demo`. ```sh # npm 7+, extra double-dash is needed npm create vite@5 tinymce-react-demo -- --template react-swc ``` 2. Change to the newly created directory. ```sh cd tinymce-react-demo ``` 3. Install the `@tinymce/tinymce-react` and `script-loader` packages. ```sh npm install @tinymce/tinymce-react script-loader ``` 4. Unzip the content of the `tinymce/js` folder from the [TinyMCE zip](/my-account/downloads/) into the `src` folder. Afterwards the directory listing should be similar to below: > `tree -L 2 src` ```text src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js ├── setupTests.js └── tinymce ├── icons ├── langs ├── license.txt ├── models ├── plugins ├── skins ├── themes ├── tinymce.d.ts └── tinymce.min.js ``` 5. Using a text editor, open `./eslint.config.js` and add `'src/tinymce'` to the `ignores` array. Diff of `.eslint.config.js` ```patch diff --git a/eslint.config.js b/eslint.config.js index 092408a..1ab8db4 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -5,7 +5,7 @@ import reactRefresh from 'eslint-plugin-react-refresh' import tseslint from 'typescript-eslint' export default tseslint.config( - { ignores: ['dist'] }, + { ignores: ['dist', 'src/tinymce'] }, { extends: [js.configs.recommended, ...tseslint.configs.recommended], files: ['**/*.{ts,tsx}'], ``` 6. Using a text editor, create `./src/BundledEditor.jsx` and set the contents to: ```jsx import { Editor } from '@tinymce/tinymce-react'; // TinyMCE so the global var exists import './tinymce/tinymce.min.js'; // DOM model import './tinymce/models/dom/model.min.js' // Theme import './tinymce/themes/silver/theme.min.js'; // Toolbar icons import './tinymce/icons/default/icons.min.js'; // Editor styles import './tinymce/skins/ui/oxide/skin.min.js'; // importing the plugin index.js file. // if you use a plugin that is not listed here the editor will fail to load import './tinymce/plugins/advlist'; import './tinymce/plugins/anchor'; import './tinymce/plugins/autolink'; import './tinymce/plugins/autoresize'; import './tinymce/plugins/autosave'; import './tinymce/plugins/charmap'; import './tinymce/plugins/code'; import './tinymce/plugins/codesample'; import './tinymce/plugins/directionality'; import './tinymce/plugins/emoticons'; import './tinymce/plugins/fullscreen'; import './tinymce/plugins/help'; import './tinymce/plugins/image'; import './tinymce/plugins/importcss'; import './tinymce/plugins/insertdatetime'; import './tinymce/plugins/link'; import './tinymce/plugins/lists'; import './tinymce/plugins/media'; import './tinymce/plugins/nonbreaking'; import './tinymce/plugins/pagebreak'; import './tinymce/plugins/preview'; import './tinymce/plugins/quickbars'; import './tinymce/plugins/save'; import './tinymce/plugins/searchreplace'; import './tinymce/plugins/table'; import './tinymce/plugins/visualblocks'; import './tinymce/plugins/visualchars'; import './tinymce/plugins/wordcount'; // importing plugin resources import './tinymce/plugins/emoticons/js/emojis.js'; // Content styles, including inline UI like fake cursors import './tinymce/skins/content/default/content.js'; import './tinymce/skins/ui/oxide/content.js'; export default function BundledEditor(props) { return ( ); } ``` 7. Update the `licenseKey` option in the editor element and include your [License Key](../license-key/). 8. Using a text editor, open `./src/App.jsx` and replace the contents with: ```jsx import { useRef } from 'react'; import BundledEditor from './BundledEditor' import './App.css'; export default function App() { const editorRef = useRef(null); const log = () => { if (editorRef.current) { console.log(editorRef.current.getContent()); } }; return ( <> editorRef.current = editor} initialValue='

This is the initial content of the editor.

' init={{ height: 500, menubar: false, plugins: [ 'advlist', 'anchor', 'autolink', 'help', 'image', 'link', 'lists', 'searchreplace', 'table', 'wordcount' ], toolbar: 'undo redo | blocks | ' + 'bold italic forecolor | alignleft aligncenter ' + 'alignright alignjustify | bullist numlist outdent indent | ' + 'removeformat | help', content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' }} /> ); } ``` 9. Test the application using the Node.js development server. - To start the development server, navigate to the `tinymce-react-demo` directory and run: ```sh npm run dev ``` - To stop the development server, select on the command line or command prompt and press *Ctrl+C*. ## Deploying the application to a HTTP server The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: [Building for Production](https://vitejs.dev/guide/build) or [Deploying a Static Site](https://vitejs.dev/guide/static-deploy.html). To deploy the application to a local HTTP Server: 1. Navigate to the `tinymce-react-demo` directory and run: ```sh npm run build ``` 2. You can optionally preview the production build by running: ```sh npm run preview ``` 3. Copy the contents of the `tinymce-react-demo/dist` directory to the root directory of the web server. The application has now been deployed on the web server. > **Note:** Additional configuration is required to deploy the application outside the web server root directory, such as http://localhost:/my_react_application. ## Next Steps - For information on bundling, see: [Introduction to bundling TinyMCE](../introduction-to-bundling-tinymce/) - For examples of the TinyMCE integration, see: [the tinymce-react storybook](https://tinymce.github.io/tinymce-react/). - For information on customizing: - TinyMCE integration, see: [TinyMCE React integration technical reference](../react-ref/). - TinyMCE, see: [Basic setup](../basic-setup/). - The React application, see: [Getting Started with Vite](https://vitejs.dev/guide/#getting-started) or [the React documentation](https://react.dev/learn).