A short explanation on how to add a custom button to the  EZPublish online editor (ezoe).

Step 1: Setting up the extension

The custom button could be set up using an existing ezpublish extension or by creating a new one. Assuming you want to use a new extension, create a new folder called ‘newbutton‘ in the extension folder. Don’t forget to activate the extension by adding ‘ActiveExtensions[]=newbutton’ or ‘ActiveAccessExtensions[]=newbutton’ to your list of ExtensionSettings in site.ini.append.php:

[ExtensionSettings]
ActiveExtensions[]=newbutton
[ExtensionSettings]ActiveExtensions[]=newbutton

Step 2: Settings

Create a subfolder called ‘settings’ in the extension/newbutton folder. In the settings folder, create a file ‘content.ini.append.php’ and add the settings below. The ‘IsInline’ and ‘CustomAttributes’ settings are optional.

<?php /* #?ini charset="utf-8"?

&#91;CustomTagSettings&#93;
AvailableCustomTags&#91;&#93;=newbutton
IsInline&#91;newbutton&#93;=true

&#91;newbutton&#93;
CustomAttributes&#91;&#93;

CustomAttributes&#91;&#93;=id
CustomAttributes&#91;&#93;=name

?>

Then create the file ‘ezoe.ini.append.php’ and add the following code:

<?php /* #?ini charset="utf-8"?

&#91;EditorSettings&#93;
Plugins&#91;&#93;=newbutton

&#91;EditorLayout&#93;
Buttons&#91;style&#93;=formatselect,bold,italic,underline,newbutton

?>

The Buttons[style] setting defines where your new button will appear in the toolbar of the online editor. Check the ezoe.ini file in the online editor extension for other options. Now create the file ‘design.ini.append.php’ and add the following code:

<?php /* #?ini charset="utf-8"?

&#91;ExtensionSettings&#93;
DesignExtensions&#91;&#93;=newbutton

&#91;StylesheetSettings&#93;
BackendCSSFileList&#91;&#93;=newbutton_ezoe.css

?>

.o2k7Skin span.mce_newbutton {background-position:-140px 0}

The background position determines what the icon will look like. It’s using the image ‘extension/ezoe/design/standard/javascript/themes/ez/img/icons.png’. If you want to create a new image for your button, you will have to add it to icons.png and then specify the proper offset in your CSS file.

Create a subfolder ‘plugins’ in the folder ‘extension/newbutton/design/admin2/javascript’, and within the ‘plugins’ folder a subfolder called ‘newbutton’. Within the ‘extension/newbutton/design/admin2/javascript/plugins/newbutton’ folder, create two files: editor_plugin_src.js and editor_plugin.js. In the editor_plugin_src.js file, add the following code:

(function(tinymce) {
        tinymce.create('tinymce.plugins.NewbuttonPlugin', {
                init : function(ed, url) {
                        //var n = ed.dom.getNode();

               // Register commands
                        ed.addCommand('mceNewbutton', function() {
                ed.execCommand('mceCustom', false, 'newbutton');
            });

            // Register buttons
                        ed.addButton('newbutton', {title : 'newbutton', cmd : 'mceNewbutton'});

            ed.onNodeChange.add(function(ed, cm, n) {
                cm.setActive('newbutton', n.nodeName === 'SPAN');
            });

                },

                getInfo : function() {
                        return {
                                longname : 'NewButton',
                                author : 'Fumaggo',
                                authorurl : 'http://www.fumaggo.com',
                                infourl : 'http://www.fumaggo.com',
                                version : tinymce.majorVersion + "." + tinymce.minorVersion
                        };
                }
        });

        // Register plugin
        tinymce.PluginManager.add('newbutton', tinymce.plugins.NewbuttonPlugin);
})(tinymce);

Check out the other plugins at ‘ezoe/design/standard/javascript/plugins’ to see what is possible. When you are done, compress the Javascript code at http://javascriptcompressor.com/

and put the resulting code in  the file: editor_plugin.js in the same directory. You should now have an additional ‘underline’ button on your toolbar, next to the existing ‘underline’ button. However, clicking on the ‘underline’ button on the right side will open a popup window for custom tags with the ‘newbutton’ custom tag already preselected in the drop-down list.

For more information, also check: http://www.tinymce.com/wiki.php/Creating_a_plugin