--- 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/6/react-zip-bundle/index.md" version: "6" last_updated: "2022-04-27T02:15:26Z" tokens: 2483 --- Important This page documents TinyMCE 6. 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/facebook/create-react-app) 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 [Create React App](https://github.com/facebook/create-react-app) package to create a new React project named `tinymce-react-demo`. ```sh npx create-react-app tinymce-react-demo ``` 2. Change to the newly created directory. ```sh cd tinymce-react-demo ``` 3. Eject the create-react-app so it is possible to modify the Webpack configuration. ```sh npm run eject ``` Press 'y' when prompted. 4. Install the `tinymce-react`, `raw-loader` and `script-loader` packages and save them to your `package.json` with `--save`. ```sh npm install --save @tinymce/tinymce-react raw-loader script-loader ``` 5. 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 ``` 6. Using a text editor, open `./config/paths.js`, after the line with `appSrc` add the line: ```js appTinymce: resolveApp('src/tinymce'), ``` Diff of `./config/paths.js` ```patch diff --git a/config/paths.js b/config/paths.js index f0a6cd9..a0d2f50 100644 --- a/config/paths.js +++ b/config/paths.js @@ -60,6 +60,7 @@ module.exports = { appIndexJs: resolveModule(resolveApp, 'src/index'), appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), + appTinymce: resolveApp('src/tinymce'), appTsConfig: resolveApp('tsconfig.json'), appJsConfig: resolveApp('jsconfig.json'), yarnLockFile: resolveApp('yarn.lock'), ``` 7. Using a text editor, open `./config/webpack.config.js` and make the following edits: - Find the `ModuleScopePlugin` and add `require.resolve('script-loader'),` to its array of exceptions. - Find the rule for processing javascript in the `src` directory and add the new rule above it: ```js { test: /\.(js)$/, include: paths.appTinymce, loader: require.resolve('script-loader'), }, ``` - Find the `ESLintPlugin` and add `exclude: ["tinymce"],` to its options. Diff of `./config/webpack.config.js` ```patch diff --git a/config/webpack.config.js b/config/webpack.config.js index 6b4a4cd..e0d1952 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -331,6 +331,7 @@ module.exports = function (webpackEnv) { babelRuntimeEntry, babelRuntimeEntryHelpers, babelRuntimeRegenerator, + require.resolve('script-loader'), ]), ], }, @@ -399,6 +400,11 @@ module.exports = function (webpackEnv) { and: [/\.(ts|tsx|js|jsx|md|mdx)$/], }, }, + { + test: /\.(js)$/, + include: paths.appTinymce, + loader: require.resolve('script-loader'), + }, // Process application JS with Babel. // The preset includes JSX, Flow, TypeScript, and some ESnext features. { @@ -724,6 +730,7 @@ module.exports = function (webpackEnv) { new ESLintPlugin({ // Plugin options extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'], + exclude: ["tinymce"], formatter: require.resolve('react-dev-utils/eslintFormatter'), eslintPath: require.resolve('eslint'), failOnError: !(isEnvDevelopment && emitErrorsAsWarnings), ``` 8. Using a text editor, create `./src/BundledEditor.js` and set the contents to: ```jsx import { Editor } from '@tinymce/tinymce-react'; // TinyMCE so the global var exists // eslint-disable-next-line no-unused-vars 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.css'; // importing the plugin js. // if you use a plugin that is not listed here the editor will fail to load import './tinymce/plugins/advlist/plugin.min.js'; import './tinymce/plugins/anchor/plugin.min.js'; import './tinymce/plugins/autolink/plugin.min.js'; import './tinymce/plugins/autoresize/plugin.min.js'; import './tinymce/plugins/autosave/plugin.min.js'; import './tinymce/plugins/charmap/plugin.min.js'; import './tinymce/plugins/code/plugin.min.js'; import './tinymce/plugins/codesample/plugin.min.js'; import './tinymce/plugins/directionality/plugin.min.js'; import './tinymce/plugins/emoticons/plugin.min.js'; import './tinymce/plugins/fullscreen/plugin.min.js'; import './tinymce/plugins/help/plugin.min.js'; import './tinymce/plugins/image/plugin.min.js'; import './tinymce/plugins/importcss/plugin.min.js'; import './tinymce/plugins/insertdatetime/plugin.min.js'; import './tinymce/plugins/link/plugin.min.js'; import './tinymce/plugins/lists/plugin.min.js'; import './tinymce/plugins/media/plugin.min.js'; import './tinymce/plugins/nonbreaking/plugin.min.js'; import './tinymce/plugins/pagebreak/plugin.min.js'; import './tinymce/plugins/preview/plugin.min.js'; import './tinymce/plugins/quickbars/plugin.min.js'; import './tinymce/plugins/save/plugin.min.js'; import './tinymce/plugins/searchreplace/plugin.min.js'; import './tinymce/plugins/table/plugin.min.js'; import './tinymce/plugins/template/plugin.min.js'; import './tinymce/plugins/visualblocks/plugin.min.js'; import './tinymce/plugins/visualchars/plugin.min.js'; import './tinymce/plugins/wordcount/plugin.min.js'; // importing plugin resources import './tinymce/plugins/emoticons/js/emojis.js'; // Content styles, including inline UI like fake cursors /* eslint import/no-webpack-loader-syntax: off */ import contentCss from '!!raw-loader!./tinymce/skins/content/default/content.min.css'; import contentUiCss from '!!raw-loader!./tinymce/skins/ui/oxide/content.min.css'; export default function BundledEditor(props) { const {init, ...rest} = props; // note that skin and content_css is disabled to avoid the normal // loading process and is instead loaded as a string via content_style return ( ); } ``` 9. Using a text editor, open `./src/App.js` and replace the contents with: ```jsx import React, { useRef } from 'react'; import BundledEditor from './BundledEditor' 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 }' }} /> ); } ``` 10. 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 start ``` - 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: [Create React App - Deployment](https://create-react-app.dev/docs/deployment). To deploy the application to a local HTTP Server: 1. Navigate to the `tinymce-react-demo` directory and run: ```sh npm run build ``` 2. Copy the contents of the `tinymce-react-demo/build` 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: [Create React App](https://create-react-app.dev/docs/getting-started) or [the React documentation](https://reactjs.org/docs/getting-started.html).