Create a TinyMCE Editor Plugin

💡

This article shows you how to create a plugin using yo generator which scaffolds files and folders for your plugin. Grunt and webpack is used in this process

⚠

The generator uses outdated packages. You may have to update the packages to meet certain requirements or else you will face errors

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
```
Run the generate command
```
  yo tinymce
```
You will be asked some questions for your project

Plugin name: The name of the plugin.
Plugin description (optional): An optional description of the plugin.
Initialize git repo? Here you can skip the creation of a new repository for the plugin.
What’s your name? For license.
Your email (optional): For license.
Your website (optional): For license.
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

yarn start

Create distribution ready build

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

Why do web developers prefer to live near the ocean?

Because they enjoy "surfing" the web! 😄

Start webpack for development

💡

Since version of packages is old, you have to provide a flag in start script

// package.json
{
"start": "grunt webpack --openssl-legacy-provider"
}

yarn start

Check your plugin

Open src/demo/html/index.html in your browser

Output

Ending Notes

This is one way to create a plugin
Another way is not using build tool. Directly create .js file and use PluginManager API

Upcoming Articles...

How to integrate Cloudinary into tinyMCE Editor
Creating plugin without build tool
Integrating the plugin into Directus Headless CMS

💡

Please note the setup process may change after new updates. During the time of writing this article, the version of tinymce is 6.6

Helpful Resources

Official Documentation

Jay Bharadia's Blog