Add functionality to the rich text editor in EPiServer CMS 6

In EPiServer 6 there is a new rich text editor that is based on TinyMCE. So the old way of adding functionality to the editor does not work anymore. This is how we did to add ImageVault to the new editor.

Instead of using EditorPlugIn attribute we used TinyMCEPlugInButton to add the ImageVault button. The class should be empty because all the functionality is added using javascript later on.

[TinyMCEPluginButton(Description = "ImageVault", GroupName = "meridium", ButtonSortIndex = 10, ButtonName = "imagevault", PlugInName = "meridium", IconClass = "mce_image")]
    class ImageVaultTinyMCEPlugin {
    }

The IconClass attribute is a css class that has the icon of the button. But since I don’t want to make changes to EPiServers css files I’ll use an existing class here and add our own icon from the javascript.

EPiServer uses the name of the plugin to locate a javascript file that adds all the functionality. I created this path in the web root folder: /util/editor/tinemce/plugins/meridium. Meridium being the name of the plug in. In that folder I created a file with name editor_plugin.js where I put all the javascripts. Having worked with TineMCE before this step was easy because this is the standard way of using TinyMCE. A good thing to remember is that the name of the plugin is case sensitive.

(function() {
	tinymce.create('tinymce.plugins.MeridiumPlugin', {
		init : function(ed, url) {
			var t = this;
			t.editor = ed;
			ed.addCommand('openImageVault', function(){
				alert('hello world');		
			});
			ed.addButton('imagevault', {title : 'ImageVault', image : '/ImageStoreNET/images/editor/ImageVaultEditorPlugin.gif', cmd : 'openImageVault'});
		}
	});
	tinymce.PluginManager.add('meridium', tinymce.plugins.MeridiumPlugin);
})();

To get the translations right I added the following lines to the language file.

   
      
         
            Meridium
         
      
   


   
        ImageVault
   

Now we are finished with the code and ready to add the button to the toolbar. This is done in admin mode and it can be done globally or locally for every xhtml property. To add it globally select “Edit Custom Property Types” and select the XHTML string. Create a new setting and drag the button to the toolbar and save and click “Use as default”.
To add the button to a single editor, select the property from the page type. Go to the custom settings tab and drag the button into place and save.

Leave a comment