Replacing the TinyMCE table plugin in Episerver 6

What I got to work with was a standard TinyMCE plugin-folder that works with any implementation. For Episerver this folder needs to reside in /Util/Editor/tinymce/plugins/. I just put that folder structure in my project and kept the VPP for Util, the local plugin folders will mix with the standard folders in the VPP-linked Program Files-directory.

Episerver has a hookup that overrides the regular TinyMCE language files and use their regular XML-setup instead. In my case I just copied the table stuff from the Episerver lang-file and just changed the XML-nesting a little bit. Also remember to add some own text to the plugin name so that you can tell the difference in the XHTML string property type designer. For icons I use the original CSS class names.

Getting completely rid of the original table plugin was a bit tricky. You need to add your own version of all the table buttons since they group together and if just one original button is selected in the toolbar designer you get the complete original table plugin initialized. Here are the plugin classes you need to put in your project:

namespace Krompaco.Plugins.TinyMCE
{
    [TinyMCEPluginButton(LanguagePath = "/tinymce/krompacotable/cell_props",
      GroupName = "krompacotable",
      ButtonSortIndex = 30, ButtonName = "cell_props", PlugInName = "krompacotable",
      IconClass = "mce_cell_props")]
    public class Cell_Props
    {
    }

    [TinyMCEPluginButton(LanguagePath = "/tinymce/krompacotable/col_after",
      GroupName = "krompacotable",
      ButtonSortIndex = 60, ButtonName = "col_after", PlugInName = "krompacotable",
      IconClass = "mce_col_after")]
    public class Col_After
    {
    }

    [TinyMCEPluginButton(LanguagePath="/tinymce/krompacotable/col_before",
      GroupName="krompacotable",
      ButtonSortIndex=70, ButtonName="col_before", PlugInName="krompacotable",
      IconClass="mce_col_before")]
    public class Col_Before
    {
    }

    [TinyMCEPluginButton(LanguagePath="/tinymce/krompacotable/delete_col",
      GroupName="krompacotable",
      ButtonSortIndex=40, ButtonName="delete_col", PlugInName="krompacotable",
      IconClass="mce_delete_col")]
    public class Delete_Col
    {
    }

    [TinyMCEPluginButton(LanguagePath="/tinymce/krompacotable/delete_row",
      GroupName="krompacotable",
      ButtonSortIndex=50, ButtonName="delete_row", PlugInName="krompacotable",
      IconClass="mce_delete_row")]
    public class Delete_Row
    {
    }

    [TinyMCEPluginButton(LanguagePath="/tinymce/krompacotable/delete_table",
      GroupName="krompacotable",
      ButtonSortIndex=12, ButtonName="delete_table", PlugInName="krompacotable",
      IconClass="mce_delete_table")]
    public class Delete_Table
    {
    }

    [TinyMCEPluginButton(LanguagePath="/tinymce/krompacotable/merge_cells",
      GroupName="krompacotable",
      ButtonSortIndex=110, ButtonName="merge_cells", PlugInName="krompacotable",
      IconClass="mce_merge_cells")]
    public class Merge_Cells
    {
    }

    [TinyMCEPluginButton(LanguagePath="/tinymce/krompacotable/row_after",
      GroupName="krompacotable",
      ButtonSortIndex=80, ButtonName="row_after", PlugInName="krompacotable",
      IconClass="mce_row_after")]
    public class Row_After
    {
    }

    [TinyMCEPluginButton(LanguagePath="/tinymce/krompacotable/row_before",
      GroupName="krompacotable",
      ButtonSortIndex=90, ButtonName="row_before", PlugInName="krompacotable",
      IconClass="mce_row_before")]
    public class Row_Before
    {
    }

    [TinyMCEPluginButton(LanguagePath="/tinymce/krompacotable/row_props",
      GroupName="krompacotable",
      ButtonSortIndex=20, ButtonName="row_props", PlugInName="krompacotable",
      IconClass="mce_row_props")]
    public class Row_Props
    {
    }

    [TinyMCEPluginButton(LanguagePath="/tinymce/krompacotable/split_cells",
      GroupName="krompacotable",
      ButtonSortIndex=100, ButtonName="split_cells", PlugInName="krompacotable",
      IconClass="mce_split_cells")]
    public class Split_Cells
    {
    }

    [TinyMCEPluginButton(LanguagePath="/tinymce/krompacotable/table",
      GroupName="krompacotable",
      ButtonSortIndex=10, ButtonName="table", PlugInName="krompacotable",
      IconClass="mce_table")]
    public class Table
    {
    }

    [TinyMCEPluginButton(LanguagePath="/tinymce/krompacotable/tablecontrols",
      GroupName="krompacotable",
      ButtonSortIndex=0, ButtonName="tablecontrols", PlugInName="krompacotable",
      IconUrl="images/PluginIcons/AllTableTools.gif")]
    public class TableControls
    {
    }
}

When you have this in place you get a new button group in the XHTML property type designer. Just remove all the original table buttons and drag your new buttons to the toolbar. Now you're running your own - and hopefully much better - table plugin.

Tested using Episerver CMS 6 R1 and 6 R2.