Create a TinyMCE Editor Plugin

Create a TinyMCE Editor Plugin

Β·

3 min read

πŸ’‘
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

  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

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

Β