Use Confluence editor

resah
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 15, 2013

Hi everyone,

I would like to make use of the Confluence editor in a plugin. It should be used to create simple content (basic markup, links, ...) and I want to process the resulting XHTML as I like.

Unfortunately I found no documentation how to embed the editor in my page template (neither velocity nor soy) or maybe there's an easy JS snippet, that will take care of loading all necessary resources?

Could you help me out here?

Many thanks!

Theresa

1 answer

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

2 votes
Answer accepted
Adrien Ragot 2
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 19, 2013

It is possible, but requires an expert level:

  • Download the Confluence source,
  • You need to depend on the editor's resource (1),
  • You need to make a Javascript call to transform your editor into a Confluence editor (2).

It will be easier to include it without the toolbars, but you're still free to try both.

(1) Have a look at confluence-source/confluence-plugins/confluence-editor-plugins/confluence-editor/src/main/resources/atlassian-plugin.xml -> <web-resource key="page-editor" ...>. It shows how to include the resources. You'll have to search into the source code to see where this is included - I presume the following excerpt from /confluence-webapp/src/main/webapp/template/custom/content-editor.vm does it all:

#requireResourcesForContext("editor")

(2) Have a look at confluence-source/confluence-plugins/confluence-editor-plugins/confluence-editor-loader/src/main/resources/jscripts/editor-loader.js . It shows how to load the editor.

This really requires an expert level. Best of luck!

resah
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 19, 2013

Hi Adrien,

thanks for your help. I guess I would consider myself as expert level, but since I failed to embed the editor in my plugins, I proofed myself wrong ;)

I will try out your suggestions and will come back to you as soon as I have any result (success or failure ;) )

Thanks again

Theresa

resah
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 28, 2013

Yes, this editor is quite difficult ...

I was able to embed the editor - even with the toolbar. I tried to use the confluence-quick-edit plugin as guideline and ended up using most part of the confluence-editor-loader.

Right now I have the following conclusions about the editor:

  • I can't use more than one instance in a page (at least not like it is loaded right now)
  • I will have to write quite some JS to handle the content, since the implementations are content type specific (for pages and comments)

Once I am more comfortable with the workings of the editor, I will publish an example plugin in Bitbucket and post a note with URL here in this thread.

Many thanks, Adrien, for your help. Your suggestions were very precise, even though the editor implementation is rather confusing ;)

Best regards

Theresa

Adrien Ragot 2
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 28, 2013

And:

  • You can only use it once in a page. Once you've loaded it for a field, even if you remove it, you cannot use it again.

Happy it helped you. I told you from memory, but I was talking from experience since I did it once with a team for a ShipIt day when I was working at Atlassian.

You should be able to let the js post the content to Confluence, in order to transform it into "storage format". It allows you to let Confluence render macros and links.

resah
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 29, 2013

I was wondering, do you think it's possible to load the stuff created by

#bodytag ("Component" "name='Content'" "theme='aui'" "template='editor.vm'")

dynamically? Maybe a JSON request and inserting it into the DOM and removing it after content creation?

This could allow the use on multiple places in a page?

What do you think?

Adrien Ragot 2
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 29, 2013

At the time, the reason for not being able to use it in multiple places in a page is the editor used to bind many events to the page. Imagine what it takes to capture the clicks, the keyboard shortcuts, the drag'n'drop of files... It would be hard to "clean-up" the page and unbind all of them. The work is more complex since foreign plugins also bind events, assign variables, etc.

I would intuitively think using it multiple times would be bug-prone; On the other hand I can't give a final answer and we should better wait for a comment by the current Confluence team.

resah
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 29, 2013

As promised: For everyone who is interested, here is the Bitbucket repository:

https://bitbucket.org/resah/confluence-embedded-rte

It is not quite finished, I thought that a proof of concept might be enough. So I not everything is working and no actual content is created, but maybe it helps others.

Adrien Ragot 2
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 29, 2013

The least we can say is... you've resolved your own question and you went all the way down to sharing the solution. I wish I could give you a badge for that!

TAGS
AUG Leaders

Atlassian Community Events