Confluence - WYSIWYG... not so much :(

[Paul Lu]

I downloaded "Status" macro source code and managed to compile the code, trying to enhance functionalities of the macro.

However, I noticed that the status block doesn't look the same during view mode vs edit mode (page source code included):

View Mode:

<p><span class="conf-macro output-inline" data-hasbody="false" data-macro-name="tutorial-confluence-macro-demo" style="background: #ee4424; color: white; font: 10px Helvetica Neue; font-weight: bold; padding: 4px 12px; -moz-border-radius:3px; -webkit-border-radius: 3px; display: inline-block; text-align:center; min-width:60px;">Blocker</span></p>

Edit Mode:

<p><img class="editor-inline-macro" height="18" width="88" src="/confluence/plugins/servlet/status-macro/placeholder?title=Blocker&amp;colour=Red" data-macro-name="tutorial-confluence-macro-demo" data-macro-parameters="colour=Red|title=Blocker" data-macro-schema-version="1" data-macro-id="bee24b00-847c-44ef-9ce1-d5183f9098b7" data-mce-selected="1"></p>

Seems like in edit mode, the status block is turned into images, however, I cannot figure out where this happens, and how to fine-tune how the image is generated, so currently it looks a bit funny.

Will be great if someone can provide some help thanks!

Paul

[Paul Lu]

Somehow I found the issue.

During edit mode, the editor uses servlet to generate "image" for the status macro instead of using css.

Upon parsing the parameters "?colour=Red&title=Blocker" to the status-macro/placeholder servlet, if the data-macro-name is anything other than "status", it will render improperly.

However, I am not sure where I should access this placeholder servlet source code for modification so any data-macro-name would render properly.

[Dominic Lagger]

Hi @Paul Lu 

I'm interessted. Why is this minimal change between view and edit so important for you? 

There are lots of macros, which aren't wysiwyg for example info, note, warning...

[Paul Lu]

Well, I am picky about how the look and feel will be like in the final viewing mode, and if the edit mode presentation is slightly off I can live with it.

However, as you can see, the font is very stretched, and the box is wider than it should be, so it will be very hard for me during edit mode to design the final look of the page I am trying to create, this is why.

Of course going back and forth between Viewing & Editing mode can resolve this issue, but it is a work-around, not a solution.

I guess some people are ok with mediocracy but not me, sorry.