Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

TinyMCE plugin Yeoman generator

How to use the Yeoman generator to bootstrap a new TinyMCE plugin using ES2015/Babel or TypeScript.

Contribute to this page

Tiny maintains a Yeoman generator to assist with creating plugins for TinyMCE. The Yeoman Generator will create the files and boilerplate code required for a custom plugin, and sets up some helpful commands.

Install the generator

The plugin generator is built with the project scaffolding tool Yeoman. To get started install both yo (the yeoman command) and the generator with the following command:

npm install --global yo generator-tinymce

Wait for the install to finish.

Run the generator

Start the generator with the following command:

yo tinymce

You will then be guided through these questions:

  1. Plugin name: The name of the plugin.
  2. Plugin description (optional): An optional description of the plugin.
  3. Initialize git repo? Here you can skip the creation of a new repository for the plugin.
  4. What’s your name? For license.
  5. Your email (optional): For license.
  6. Your website (optional): For license.
  7. Which license do you want to use? Choose the license for the plugin.

Yeoman installs the needed dependencies, and the project is bootstrapped and ready. cd into the plugin directory and run the following command to start the auto-reloading development server:

npm start

Create distribution ready build

Run the following command once you have completed development of the plugin:

yarn build

A dist directory will be created, containing a sub-directory with the same name as the plugin. The sub-directory will contain the following files:

  • plugin.js - unminified plugin bundle
  • plugin.min.js - minified and uglified plugin bundle
  • CHANGELOG.txt - the text file containing your changes
  • LICENSE.txt - the text file containing your license
  • version.txt - the text file containing the version of your plugin

For example, yarn build will generate the following output for a plugin named my_plugin:

dist/
└── my_plugin/
    ├── CHANGELOG.txt
    ├── LICENSE.txt
    ├── plugin.js
    ├── plugin.min.js
    └── version.txt

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.