Using tinymce on aui-dialog2

#1

Hi everyone,

I’m using the TinyMCE in a text area from aui dialog2.
However, I’ unable to edit my text area.

tinyMCE_AUI_dialog2
tinyMCE_AUI_dialog2848×658 46.7 KB

As you can see on the attachment, the TinyMCE is initiated but I’m unable to edit it.

After taking a look at the documentation I’ve tried this in order to focus the tinyMCE:
(document).on('focusin', function(e) { if ((e.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});

Does anyone know how JIRA is able to use the TinyMCE inside the dialog when the user edits the issue?

Thank you, in advance, for your cooperation.
Best regards,
André Fernandes Rodrigues

#2

Hi @andre.fernandes.rodr,

Depending on how I read your question you seem to be asking a few different things, so I want to clarify some stuff.

  • Does the TinyMCE field “work” at all?
    • As in, after the dialog opens, can you manually click inside the field and type and affect the content inside the editor?
    • Does this situation change when you remove the custom javascript you wrote?
    • If the field isn’t working at all…
      • Are there any JavaScript errors in your browser’s developer console? What are they?
  • Is the problem that the field doesn’t work whatsoever, or that the field is not focussed after the dialog is opened?
    • TinyMCE emits an “init” event when the editor is loaded.
    • You could listen for that event, and focus the editor element once it is fired.
    • If the editor is initialised before the dialog is shown, you should also listen for the AUI dialog’s open event as well.

Cheers,
Daz