Building a simple custom plugin to TinyMce in Episerver.Cms.TinyMce package 2

Having to upgrade TinyMCE in Episerver to latest packages and you have elder plugins? Or want to build some custom plugin in wysiwyg? Here is a very simple example of how.

Warning: A non-numeric value encountered in /storage/content/29/141529/ on line 27

Published 1st September 2018
Episerver 11
Episerver.Cms.TinyMce > 2.0
TinyMce > 4.0

In this blog post I’ll give you an example how to implement a custom button plugin in tinyMCE.

Check out my other tinyMCE plugin tips here

  • Example: “A background plate”, a custom button that wraps content into a div with class.

So… 2 steps

  1. Code a tinymce.PluginManager js class
  2. Register the script and plugin


The main parts in a plugin is explained with this image:

  • Use tinymce.PluginManager.add to register
  • addCommand is used for you custom logic
  • addButton to add your button to toolbar
  • monitorNodeChange is non mandatory, where you can put logic for enabling/disabling your button

Adding your plugin to in a non Episerver site

Add scripts to site:

<script src=”/tinymce/js/tinymce.min.js”></script><script src=”/ClientResources/Scripts/tinymce/plugins/customplateplugin/editor_plugin_v4.js “></script>

Then init tiny:

tinymce.init({  selector: ‘textarea’,
plugins: ‘customplateplugin’,
toolbar: ‘customplateplugin’

How to add your external plugin to Episerver XhtmlString property


You need this CSS to add on site and tinyMCE for this plugin to work:

.plate {
padding: 25px;
background-color: lightgray;

The complete js code:

SEO Terms

  • Add Plugins to TinyMCE
  • TinyMceInitialization example


About the author

Image of Luc GossoLuc Gosso
– Independent Senior Web Developer
working with Azure and Episerver

Twitter: @LucGosso


Like it? please up vote

Leave a Reply

Your email address will not be published. Required fields are marked *