{"id":20438446,"url":"https://github.com/tinymce/tinymce-webpack-example","last_synced_at":"2025-04-12T22:35:51.883Z","repository":{"id":38335395,"uuid":"380890817","full_name":"tinymce/tinymce-webpack-example","owner":"tinymce","description":"An example of using webpack to bundle tinymce.","archived":false,"fork":false,"pushed_at":"2023-01-09T18:06:32.000Z","size":107,"stargazers_count":5,"open_issues_count":2,"forks_count":2,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-26T16:39:12.332Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinymce.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-28T03:08:00.000Z","updated_at":"2025-01-10T06:50:04.000Z","dependencies_parsed_at":"2023-02-08T13:16:35.578Z","dependency_job_id":null,"html_url":"https://github.com/tinymce/tinymce-webpack-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinymce%2Ftinymce-webpack-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinymce%2Ftinymce-webpack-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinymce%2Ftinymce-webpack-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinymce%2Ftinymce-webpack-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinymce","download_url":"https://codeload.github.com/tinymce/tinymce-webpack-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248642573,"owners_count":21138351,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T09:11:05.624Z","updated_at":"2025-04-12T22:35:51.858Z","avatar_url":"https://github.com/tinymce.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TinyMCE Webpack Example\n\nThis page gives an example of how to bundle TinyMCE using webpack. This however\nis **not** an endorsement of bundling TinyMCE. \n\nIt is frequently much better to serve the `tinymce` folder along with your\nstatic files as TinyMCE was designed to load components as needed so bundling\nadds a lot of complexity, restricts the ability to load translations based on\nconfiguration and may in some cases actually slow down loading of the\neditor.\n\n## Reasons not to bundle\n\n1. Bundling is complex\n2. Letting TinyMCE prioritize load order can result in faster display time\n2. Plugins request translations at load time so some plugins can not be bundled \nwithout locking you to a single language.\n\n### Alternatives to bundling\n\n1. Load from [cloud](https://www.tiny.cloud/auth/signup/)\n2. Put the `tinymce` folder in a location for static files, such as the `public` folder in a project created by [`npx express-generator`](http://expressjs.com/en/starter/generator.html) or [`npx create-react-app`](https://create-react-app.dev/docs/getting-started).\n3. Bundling of the core editor combined with hosting the files as in point 2 and setting the global `tinymce.EditorManager.baseURL` to the URL where the files are hosted and setting `tinymce.EditorManager.suffix` to `\"min\"`.\n\n## How to read this example\n\nThe main files to read are:\n- [`src/editor.js`](src/editor.js) - which lists all the files you need to load to get TinyMCE working.\n- [`webpack.config.js`](webpack.config.js) - which shows a simple way to configure webpack.\n\nThis example uses the Webpack plugins:\n- [`css-loader`](https://webpack.js.org/loaders/css-loader/) - to read CSS files.\n- [`style-loader`](https://webpack.js.org/loaders/style-loader/) - to put CSS files on the page.\n- [`raw-loader`](https://www.npmjs.com/package/raw-loader) - to load files (in this case CSS files) as a string.\n\n## How to run this example\nAssuming you have `yarn` and `python` installed:\n```sh\nyarn install\nyarn build\npython3 -m http.server\n```\nThen open the URL that python3 displays which should be something like [`http://0.0.0.0:8000/`](http://0.0.0.0:8000/).\n\nA simple webpage showing TinyMCE should be displayed.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinymce%2Ftinymce-webpack-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinymce%2Ftinymce-webpack-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinymce%2Ftinymce-webpack-example/lists"}