How initialize a TinyMCE / Rich Text Editor instance in a macro plugin?

[Martin Wiegand]

I'm developing a macro plugin where I need the Rich Text Editor for creating comments on (multiple) blog posts. How I can initialize a Rich Text Editor instance for a specific textarea or something like that. I tried multiple things, but failed. I tried to use the same code from blog page comments, but then the more complex page editor is rendered with title and content field. I need the simple variant like in editing comments on blog post pages:

Confluence.QuickEdit.activateEditor(AJS.$('#myeditor-container-$blog.id'), saveHandler, cancelHandler, function() {}, '#');

Regards

Martin

[resah]

Hi Martin, hi Trupti,

I can recommend the following resources:

• a question I asked a while ago
• my BitBucket repository where I tried to implement a basic version of the RTE
• and finally my advice:

As Adrien mentioned regarding the editor a while ago: Confluence displays only one RTE per page. The RTE is already rendered in page but hidden and is moved around the DOM to be placed wherever needed.

Why is that so?

The RTE has so much event bindings, which make it hard to cleanly add/bind and remove/unbind everything RTE-related when necessary.

If you attempt to use thee RTE, try to do the same like Atlassian: Initialize once, move it where need and always reload page after usage :)

I hope I could give you a rough outline what's expecting you ;)

Regards

Theresa

[Trupti Kanase]

Hi Theresa,

Thanks for ur help. I have tried ur solution & it worked for me. still I need ur help.

Do you have any idea about scaffolding plugin? I want same behaviour in my case.

e.g. - when I click on any macro body, it opens the content of that macro inside dialog. & I want to bind the confluence editor to that dialog.

Is there any way available to do the same using Javascript?

[resah]

Hi,

would you mind up-voting my anser if it helped you?

I don't really know the Scaffolding plugin. But assuming you want to create macro which displays its body text in the page (e.g. a paragraph). In view mode a click on this paragraph opens a dialog containing the RTE, where you can edit the content. And after clicking "save" the content is stored and displayed in the page.

I guess, I would start this way:

• Create a JS-resource for page context, in this JS
  
  • create listener for the click on your macro
  • if clicked, display a dialog
  • check whether DOM already contains the RTE
  • if not create it in DOM, bind its events and add all form data you needed to process the edit
  • move the RTE it into your dialog
  • if the edit is canceled, move the RTE back
  • if the edit is stored
    • store with whatever logic you choose and reload the complete page with new content

Just a few thoughts...

Regards

Theresa

[Trupti Kanase]

Hi Theresa,

Thanks for ur time.

I want all this operation on "Edit mode" of the page. Not in view mode.

The confluence edit mode already contains one RTE. can I use one more RTE inside dialog on edit mode?

[resah]

I guess I better not ask why you would want to do this? ;) I can't imagine a reason for overlaying a RTE with an RTE :)

But anyway, I am not sure this is possible. After everything I heard from Adrien, this is strongly discouraged. Couldn't you just use the body part of the marco?

I'm afraid I can't really help you with this. Because you would have to handle all events separately and for that you would have to rewrite a main part of the RTE JS stuff. But since I am not a JS developer (I feel more confident in Java), I can't guide you through that (mess).

In a nutshell, I guess I can't help you any further. Sry.

[Trupti Kanase]

Thanks Theresa for ur great time.

[Trupti Kanase]

Hi martin,

Did you find any solution for this. I am looking for the same.