Plugin with advanced custom editor - similar to Gliffy and Draw.io

Confluence Development Confluence Cloud
1

We’re looking into creating a Confluence plugin for our existing app. The exisiting app is used for creating different types of visual diagrams using an web based editor. We’d like to have a similar type of plugin to for example draw.io where we can expose the app editor, have the user create diagram and then insert and show these diagrams on the Confluence page.

I realize this i huge task and would just like to have a few pointers in the right direction as Confluence plugin development is new for us.

We’re looked through the Confluence Cloud Getting Started site and there’s a lot of interesting articles there. But we can’t really find a spot on article for what we’re trying to do. Would for example Custom Editor using Confluence Connect (Macro custom editor with Confluence Connect) be a good option for us or are we looking for an other way or just trying to show the editor content in an iFrame?

2

Hi @richard.hallgren I just found this old post, and I am trying to do exactly the same. Did you find a solution by any chance?
Alternatively, if anyone could help, that would be greatly appreciated.
Thanks!

3

Hi @GildasOlympio , you should look into dynamic content macros (https://developer.atlassian.com/cloud/confluence/modules/dynamic-content-macro/)
The macro is rendered via an iframe where you’re free to add hover effects, buttons, api calls, etc…

4

Thanks heaps @Corentin ! I actually started looking into that and it seems to be the right option. I couldn’t figure out how to add buttons on hover though (like zoom in, zoom out, edit, settings…) there isn’t anything about that in the doc, could you provide guidance on how to do that?
Thanks again

5 
<div class="container">
  <AppContent />
  <div class="displayOnHover">
    <Buttons />
  </div>
</div>

//css
.container:hover .displayOnHover {
  display: block;
}
.displayOnHover {
  display: none;
}

Something like that? It depends on if you’re using a framework or not? It really is just like building a regular web page, only it is displayed in an iframe, and you have some limited access to the parent page properties via the AP Connect Javascript api About the Connect JavaScript API

6

Right, ok I’ll give it a go. I thought there was a specific option for that as all the existing macros (draw.io gliffy etc.) have really similar panels that display on hover, but probably all custom made :+1: