How to create a TinyMCE custom dialog plugin

This example shows you how to implement a dialog box or popup window in TinyMCE v4.

Published 25th of August 2018
Episerver 11
Episerver.Cms.TinyMce > 2.0
TinyMce > 4.0

In this blog post I’ll give you one example how to implement custom button plugin in tinyMCE. The example scenario is a custom button with dialog options to add Image description, size and positioning the image/wrapping div. The button should be only applicable on image.

So… 2 steps

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

Adding your plugin to TinyMCE in Episerver CMS

Adding your plugin to in a non Episerver website

Add scripts to site:

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

Then init tiny:

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

editor.addCommand && editor.windowManager.open

addCommand is triggered from your button registration when button clicked, check cmd: “tinymcecustombutton” in example above

TinyMCE supply a very useful lib, so by using editor.windowManager.open, you may build a nice dialog form.

editor.windowManager.open takes several fields, in this example: Title, Body, OnSubmit, where you in “Body” specify UI fields you want to use. Use onsubmit for your logic processing input values, then editor.selection.setContent to input in tinymce.

CSS

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

The complete js code:

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

 

SEO Terms

  • Add Plugins to TinyMCE
  • Build your own plugin for episerver wysiwyg
  • Could not load type ‘EPiServer.Editor.TinyMCE.TinyMCEPluginNonVisualAttribute’ from assembly ‘EPiServer.Cms.TinyMce. Having this error? Remove  TinyMCEPluginButton registration in your cs code. Replace with TinyMceInitialization

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
2