Using Base64 Embedded Images in HTML

[Slade Jeppesen]

Hey I'm working on uploading html files to Confluence (this is done through the API). Originally the plan was to only use text (which we got working great), but now we need to include pictures as well. We decided to either A: attach the pictures first, and then push the html after we put the correct paths in the html or B: Encode the pictures as Base64 and then just push html.

I've been working on B, the Base64 portion, whenever I go to the Source Editor and paste an html file with Base64 instead of Confluence leaving it as Base64, it decides to convert the Base64 to an attachment. It then deletes my entire html information, and only has the first Base64 picture. Is there any way for it to leave my Base64 alone? I'd rather have an embedded picture than a attachment one. It also is much easier to do B rather than A.

[Daniel Lenski]

When you say "Base64 portion", are you talking about images with data: URIs as their source, e.g. <img src="data&colon;image/png;base64,...">

If so, I have encountered the same bug.

https://community.atlassian.com/t5/Confluence-discussions/WYSIWYG-editor-accepts-HTML-with-embedded-images-but-doesn-t/m-p/776355#M1716

[Slade Jeppesen]

Yes that is exactly what I was talking about. I did find a solution that at least worked for me. Here it is.

Originally I was trying to paste straight HTML into the Source Editor. This would ruin the way the pictures and html was set up. What I instead starting doing was using the HTML Macro. If I inserted my HTML Code into the HTML Macro than everything displayed correctly. The Macro essentially just adds these lines into the source editor before and after where your code will go.

<p class="auto-cursor-target">
  <br/>
</p>
<ac:structured-macro ac:macro-id="fae243f8-1d98-45f9-a52c-4ba0a140fb71" ac:name="html" ac:schema-version="1"/>
*** Your code goes here ***
<p class="auto-cursor-target">
  <br/>
</p>

This way now I can push about 10 pages to Confluence per second just by pushing HTML.

Let me know if you have any more questions about what I did.

[Daniel Lenski]

Thanks. That's quite interesting. So if the HTML including data: URIs is wrapped in the HTML macro… it works.

Probably this is because Confluence is applying some additional parsing and reformatting to HTML not wrapped in this macro, and it gets confused by data: URIs.

Unfortunately, I'm not using the API… I'm trying to allow my users to copy-and-paste the HTML / rich text directly into the WYSIWYG editor window. So I don't think I can use your solution for now, but it's good to know about.

[NerdyDeeds]

@Slade Jeppesen I would LOVE more information on how you're working this particular bit of Santeria. I'm attempting to do something similar, and keep getting (fairly epic) fails. Any chance you'd share some pointers? Or even a code snippet?

Feel free to hit me directly if you prefer: Nerdy.Deeds (at) done (dot) cheap

[chandra sekhar]

Hi Team,

<p class="auto-cursor-target">
  <br/>
</p>
<ac:structured-macro ac:macro-id="fae243f8-1d98-45f9-a52c-4ba0a140fb71" ac:name="html" ac:schema-version="1"/>
*** Your code goes here ***
<p class="auto-cursor-target">
  <br/>
</p>

This code is working for conflence server or confluence cloud please let me know.

Thanks-Chandrasekhar.