Meridium: Webbplatser för offentlig sektor

Add functionality to the rich text editor in EPiServer CMS 6

Skrivet av Oskar Madestam den 23 mars 2010 ImageVault, EPiServer 1 kommentarer

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.

Diskussion

  1. Paul, den 15 februari 2011

    A helpful post that has helped us to get our button added to the XHTML string property. Would you be able to post an example of how this could be taken a bit further so that clicking the new button directly opens the standard EPiServer file browser at edit/FileManagerBrowser.aspx (we want to select a PDF/word doc, and provide its link and download size), and thus gets info back from that dialog? Following the built-in use of tinymce\plugins\advimage is very convoluted. Thanks in anticipation.

Skriv kommentar

Ange kontrollordet i textfältet nedan.

Kategorier

Arkiv