Customize Confluence editing toolbar

[Alessandro Melandri]

Is it possible to customize the editing toolbar in Confluence? We use the Code macro very often and I'd like to have a button in the toolbar instead of having to open Insert --> Other Macros and search for the Code macro.

[Ciro Santilli]

One good workaround is to hit left open curly brace `{` and then start typing the name of the command, e.g. `{code` for code blocks. This opens a filter dropbox which you can then navigate with Up, Down, Enter or the mouse.

[Matthew J. Horn]

You can hack it with jQuery.

Add the following to your Custom HTML:

<!-- Replace "Table of Contents" macro in editor's "Insert" drop down list with "Code" -->
AJS.$('li.dropdown-item.macro-toc').attr('data-macro-name','code');
AJS.$('a#toc.item-link').attr('title','Insert Code macro');
AJS.$('a#toc.item-link').text('Code');

The key is the data-macro-name. Setting that to "code" invokes the macro browser and selects the Code macro automatically.

Note: I tried to use append() to add a new macro to the end of the list, but could not get it working. Maybe someone can step in and debug this?

AJS.$('#macro-insert-list').append('<li class="dropdown-item macro-toc" data-macro-name="code"><a id="code" class="item-link" title="Insert \'Code\' macro" href="#"><span class="icon "></span>Code</a></li>');

BTW, this is on Confluence 4.2.3. If you have a different version of Confluence, the style names might be slightly different.

[Brock Winstead]

Building on @Matthew J. Horn's answer above, I made something work in more recent versions of Confluence. (I'm on 6.7.2. Can't speak to compatibility with specific versions.)

I wanted to add a button to the toolbar -- not the macro list, but the actual toolbar -- to add a certain macro (in my case, a "tooltip" user macro) that operated on the selected text. 

I first built the HTML needed for the new toolbar button by just copying an existing one and editing it:

<li class='toolbar-item aui-button aui-button-subtle' id='rte-button-tooltip' data-tooltip='Insert Tooltip'> <a class='toolbar-trigger' href='#' title='Insert Tooltip'><span class='icon aui-icon aui-icon-small aui-iconfont-help '>Insert Tooltip</span></a></li>

(Note that I'm using an existing AUI icon for the button. It's possible to add a custom icon, with some modifications to the enclosed <span>.)

I then used the jQuery/AJS function .after() to add that HTML content immediately after an existing button. In my case, I wanted it right after the "More formatting" toolbar button, but you could put it anywhere. You could even put it at the head of the list using .before().

 $("#more-menu").after("<li class='toolbar-item aui-button aui-button-subtle' id='rte-button-tooltip' data-tooltip='Insert Tooltip'> <a class='toolbar-trigger' href='#' title='Insert Tooltip'><span class='icon aui-icon aui-icon-small aui-iconfont-help '>Insert Tooltip Macro</span></a></li>");

That JS goes at the very bottom of my Main Layout template. It's wrapped in a statement that only executes once the editor is initialized: AJS.bind("init.rte", function() { ...}); . So is everything else related to it.

From there, you have to define what happens when you click the button: invoking the macro browser correctly, passing it anything you want to pass it (in my case, using any selected text as a parameter instead of the body).

I went over that in a different question/answer.

You could use this same process to add an item to the macro list: copy existing item, modify to create custom HTML, insert it where you want it with .after() or .before().