Create a visual TinyMCE Plugin

This post will guide you how to extend the TinyMCE editor EPiServer with a custom button and dialog.

Create a new class and apply the attribute TinyMCEPluginButton to it. This will register the plugin as a visual plugin, which is exactly what we need for this scenario.  

$ SRCustomTablePlugin.cs

using EPiServer.Editor.TinyMCE;

namespace EPiServer.Plugins.TinyMCE
        PlugInName = "SRCustomTablePlugin", // Internal name and also name of the plugin folder where rest of files must be placed
        Description = "Inserts three different tables of choice",
        DisplayName = "CustomTablePlugin",
        ButtonName = "btnCustomTable", // Name of button that the user will press in UI (will be explained later)
        GroupName = "table", // Where the button will be grouped
        IconUrl = "Editor/tinymce/plugins/SRCustomTablePlugin/img/customtable.gif")]
    public class SRCustomTablePlugin

EPiServer will automatically find the class and register the plugin. So the class could be placed anywhere, but I recommend putting it with the rest of the files.

Project structure used in this example:

Project structure in Visual Studio for the client script files and html

TinyMCE in EPiServer will automatically assume (by default) that the client plugin file are located in (in this scenario) /Util/Editor/TinyMCE/Plugins/SRCustomTablePlugin/editor_plugin.js

$ editor_plugin.js

(function (tinymce) {
    tinymce.create('tinymce.plugins.SRCustomTablePlugin', {
        init: function (ed, url) {
            // Register commands
            ed.addCommand('mceCustomTable', function () {
                    file: url + '/dialog.html',
                    width: 320,
                    height: 200,
                    inline: 1
                }, {
                    plugin_url: url

            // Register buttons
                    title: 'Insert Custom Table', 
                    cmd: 'mceCustomTable',
                    image: '/util/editor/tinymce/plugins/srcustomtableplugin/img/customtable.gif'

        getInfo: function () {
            return {
                longname: 'Custom Tables',
                author: 'SoftResource AB',
                authorurl: '',
                infourl: '',
                version: tinymce.majorVersion + "." + tinymce.minorVersion

    // Register plugin
    tinymce.PluginManager.add('SRCustomTablePlugin', tinymce.plugins.SRCustomTablePlugin);

This code will init the plugin, so in this example we will register a button (which will be available for the toolbar) and a button command (that will open dialog.html).
We could do lots of other stuff here aswell, so check out the tinyMce documentation!
Now we are free to do normal html/js actions in the dialog.html.

Whats important is that the dialog includes tiny_mce_popup.js so we can access the active editor and manipulate it.

$ dialog.html

<script type="text/javascript" src="../../tiny_mce_popup.js"></script>

We also have a button which we bind a onclick function to:

$ dialog.html

<input type="button" onclick="InsertTable()" value="Insert Table"/>

$ script.js

function InsertTable(){
  var activeEditor = tinyMCEPopup.editor;
  var htmlToInsert = "<tbody><tr class="bluebackground"><td></td></tr><tr><td></td></tr></tbody>";
  tinyMCEPopup.executeCommand('mceInsertContent', false, activeEditor.dom.createHTML('table',{width: 100%} , htmlToInsert);

So when we, in the dialog popup, click Insert Table we populate the active editor with the generated html code.

All we need to do now is enable the button for the TinyMCE Editor. Go to Admin Mode > Page Type > Edit Custom Property Types.
Edit XHTML String (>255) and create/edit a setting. Include the newly created button in the configuration and save.

And here is the result! 
Custom content inserted into the textarea

With this technique you could do all sorts of cool plugins to the TinyMCE editor and not just for EPiServer.