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.

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

tinymce.PluginManager.add

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

CSS

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:

https://gist.github.com/LucGosso/b5c723b832435b8ae396487ef5befdc3#file-editor_plugin_plate-js

SEO Terms

  • Add Plugins to TinyMCE
  • TinyMceInitialization example

Resources

About the author

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

Twitter: @LucGosso
LinkedIn: linkedin.com/in/luc-gosso/
Github: github.com/lucgosso

 

Like it? please up vote
3