Adding a custom format to the Confluence editor

[Simeon Vincent]

The Confluence editor is a customized version of a commercial tool called TinyMCE. This tool supports the ability for users to define custom formats that will appear in the style dropdown list (source).

Can Confluence administrators add custom formats to the the format/style list? The functionality exists in the underlying toolkit and it looks like Confluence itself uses that functionality (see <confluence domain>/s/en_GB/<hash>/<hash>/<hash>/_/download/contextbatch/js/editor,macro-browser,page/batch.js), but I can't seem to find any way to add my own style.

Any assistance would be greatly appreciated.

[Simeon Vincent · Accepted solution]

All right gang, its time to call it a day on this question. I think it's safe to say that it is not possible to add custom styles to the Confluence editor.

[Pierre Hilson]

Well. I need to keep things easy for the editors to make sure the content will always be presented the same way.

We will put a lot of log/console dumps in the Knowledge Base.

The 'block' style is nice because it does take less space than a code block while not keeping the text inline. I like the fact that the 'block' style indents the text and put a nice vertical line on the left.

I would like it to:

- not being italic

- be monospace

How can I modify the 'block' style ? Can I achieve this by changing the CSS style ?

How could I add one more style ?

By style I mean the ones found in the style drop down at the upper left corner of the editor.

Thanks,

Pierre

[Pierre Hilson]

Isn't there any way to define new styles, really ???

I would like to add styles like 'log' or 'console' that would be close to the 'block' style but use monospace font and not italic.

Thanks,

Pierre

[Joe Clark]

Hi Pierre,

Confluence already supports this. Try wrapping your text in Confluence between double curly-braces, {{like this}}.

[KC Integrations]

We are trying to move our online user documentation from Robohelp to Confluence, and this issue is going to be a blocker for us moving our content to Confluence. We have thousands of pages, all with styles which gives us rich formatting and customised look. I can Apply the stylesheet to the Space and it looks just like the Robohelp site - wahoo.

But moving forward we cannot continue the look and feel with new content - BUGGER.

Is there any way I can import our Robohelp styles in the Editor?????

There must be a way.

P.S I said LIKE to this article, not because I liked the solution, but to highlight that this is a major limitation of Confluence.

[Nate M]

Has anyone come up with better solutions?

Running into the same issue with this on our end.  

Basically we want "monospace" font, but also the capability to color it differently to highlight things the user sees in the raw log outputs of interest.  

Having custom "styles" would be very much appreciated!

[dominic]

I am currently trying to add custom formats as well. My support request resulted in a "sorry - not supported" but I was given some tips on where to dig deeper:

confluence-editor-5.1.3.jar
atlassian-tinymce-5.1.3.jar

These two jars are related to the editor. The tinymce jar represents the tinymce editor in a version 3.x - and the initialization is done in the confluence-editor jar file. I stumbled over the style_formats option which enables you to directly add (and name) inline and class styles to the style menu:

http://www.tinymce.com/wiki.php/Configuration3x:style_formats

It says, that the style_formats option is similar to the formats option but adds a name. Another option would be to try this:

http://www.tinymce.com/forum/viewtopic.php?pid=79986#p79986

I didn't have the time to try one of those two methods so far... Do you know of a way defining style_formats post-init? Another possibility would be to overwrite the initialisation or replace the confluence-editor jar completely with a custom one which adds my styles.

Did you have any luck so far?

[Simeon Vincent]

No luck. I ended up creating a set of specific macros to emulate the desired functionality, but they don't get much use because they're not accessible where users would expect. I mostly use them for high traffic, low edit count pages like a space home page.

[tousifs]

Hi,

The most feasible solution is to override it, in Confluence Admin >> Stylesheets. For more information

please refer to the following.
* https://confluence.atlassian.com/display/DOC/Styling+Confluence+with+CSS

Regards,

tousif shaikh.

[Simeon Vincent]

Thanks for the suggestion. Unfortunately, a CSS-only approach would only allow us to modify existing styles, not create new styles.

My goal is to give my users an easy way to work with additional styles. For example, I want to add support for admonitions like "Warning" or "Note". If possible, the user would select the style from the dropdown format menu in the top left corner of thte editor.

Below is a quick mock up of some HTML and CSS that would allow for "Warning" support. In order to add the warning style to a block-level element, the editor would only have to append the "warning" class.

<html>
<body>
<style>
.warning {
  background: #FEE;
  border: 1px solid #A00;
  border-radius: .25em;
  padding: .5em 2em;
}
.warning:before {
  content: "Warning!";
  color: #A00;
  font-weight: bold;
  margin-left: -1 em;
  margin-bottom: .5em;
  margin-top: .5em;
  display: block;
}
</style>
<p>This is a test</p>
<div class="warning"><p>It's dangerous to go alone.</p></div>
</body>
</html>

[Joe Clark]

How is this different from the "Warning" macro provided in Confluence? I'm not asking to be snarky, I'm genuinely interested to know why you'd prefer to do this via a paragraph style rather than a macro. :-)

[Simeon Vincent]

The Warning example was contrived for the sake of simplicity. In practice the primary difference between a macro and a style is how you interact with it in the UI. I'm a technically savy superuser and don't have a problem parsing code or WYSIWYM GUIs, but most people editing articles aren't.

In practice I'd like to use styles to mark standard UI elements as things like "keyboard input", "parameter", or "see also" and have CSS handle the heavy lifiting in the editor and on the final page.

As zorglups said, " I need to keep things easy for the editors to make sure the content will always be presented the same way."

[Simeon Vincent]

I realized I didn't directly answer your question. Let's try again :)

Right now there are two major differences between using a macro and assigning a custom class to an element. First, the CSS-based approach allows the editor and final version of the document to share the same visual presentation. This allows users to use the editor as a WYSIWYG tool rather than a WYSIWYM one. Second, classes are difficult to apply while macros are trivial to use. This, of course, stems from the fact that applying classes requires the user to page's code view, find the element, assign a class, switch back, and save (versisus typing [name, pressing Tab, saving).

Assuming custom styles were integrated into the editor, users would simply highlit their text, select the style, and boom they're done. This would greatly incrase the flexibility of the tool (Confluence) in that customers could more easily modify the tool to fit their needs.

---

As I see it, styles are functionally different from user macros in that styles decorate a piece of input while macros (have the potential to) fundimentally change how a string is handled. Styles should be limited to what modifications the user can make with CSS. Macros should be used for non-trivial manipulation of data (e.g. taking an input parameter, extracting the current space name, and username in order to construct a URL to another website).

That said, I'd love to see more support for macro styling/customizatoin via CSS and JavaScript.

---

I should mention that I looked into implimenting this myself, but it appears that TinyMCE requires that all styles are defined when it is initialized. I couldn't find any post-init functions that would let another bit of JavaScript add new/remove existing styles.