Toolbar Customization of Web Author XML

[Rishabh]

Hi

I want to edit the toolbar and add a custom action 'outputclass'. But did not found a way how can I do it. Just implemented the below code and it added my custom action i.e 'outputclass' into the toolbar array only.

Code:
function addToDitaToolbar(editor, actionId) {
goog.events.listen(editor, sync.api.Editor.EventTypes.ACTIONS_LOADED, function(e) {
var actionsConfig = e.actionsConfiguration;

var ditaToolbar = null;
if (actionsConfig.toolbars) {
for (var i = 0; i < actionsConfig.toolbars.length; i++) {
var toolbar = actionsConfig.toolbars;
if (toolbar.name === "DITA") {
ditaToolbar = toolbar;
}
}
}

if (ditaToolbar) {
ditaToolbar.children.push({
id: actionId,
type: "action"
});
}


});
}


But now the newly outputclass name action is not showing in the toolbar section. It is showing only the built in and DITA tools actions.

So please can anyone tell me how can I add a custom toolbar in web author XML and where to write the functionality of the same.