It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Customize Confluence editing toolbar

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.

3 answers

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.

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.

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(). 

Suggest an answer

Log in or Sign up to answer
Community showcase
Published in Confluence

6 Awesome Ways to Apply Trello, JIRA and Confluence to your Project

I attended  Atlassian Summit 2019  and learned a lot from the presenters, attendees and knowledgeable Atlassian product managers. The presentations I attended focused on applying Agile, pla...

4,057 views 15 38
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you