How to initialize the WiKi-Renderer for an Admin Plugin?

Jira Development Jira Server
, ,
1

Hello,

I am trying to develop a Plugin for Jira Admins, in which they can Submit a Text through a form and something happens with the text(That part is not in scope right now).
In this form I would like to use the fancy Richt Text Editor from Jira itself, the Wiki Renderer and submit the form through it. Unfortunately I am a beginner in this context and don’t know where to start.
I have read all the existing Threads on this topic and they were a few steps ahead already leaving out the information I need. I already managed to add in the Websection for the plugin and add a webitem from which the VM Template with the form gets rendered.
How do I initialise the Wiki Renderer:

  • a) On my VM template?

  • b) In my servlet(?), java file where the VM gets loaded in

I am sorry if it is a complete duplicate in your opinion, but the existing threads unfortunately did not help. Thank you for reading!

2

Here are the different places where I have tried to gather more information from(Posting over pastebin since the community forum only allows 2 links to be shared):

3

Try requiring

com.atlassian.jira.plugins.jira-editor-plugin:init
or
com.atlassian.jira.plugins.jira-editor-plugin:wiki-editor-resources-init

using JavaScript like

WRM.require('wr!com.atlassian.jira.plugins.jira-wiki-editor:wiki-editor-resources-init').then(function () {});
1 Like
4

Thank you very much @tjoy for your answer,

but how do I utilise those two things you said?
I did add the following lines in my VM:

$webResourceManager.requireResourcesForContext("com.atlassian.jira.plugins.jira-wiki-editor:wiki-editor-resources-init")
$webResourceManager.requireResourcesForContext("com.atlassian.jira.plugins.jira-editor-plugin:init")

and also WRM.require('wr!com.atlassian.jira.plugins.jira-wiki-editor:wiki-editor-resources-init').then(function () {}); in my main js file. My Js is being read properly

Do I know create a Text area and give it a class or an id that is predefined? Is there a custom component to declare? Maybe something like <wiki-editor-field> ?

Regards

5

There seems to be a custom Skate.js element called <rich-editor> and also <wiki-textfield>

Pretty sure it can also be initialized based on some classes, but I don’t know what exactly those are. Let’s hope these custom elements work :crossed_fingers:

6

I have tried <rich-editor> and <wiki-textfield> both, also separately. Only <wiki-textfield> seems to get rendered but completely empty, on purpose I wrote “rich-editor” and “wiki-textfield” to see if any of them get rendered.
JS and the HTML are as stated above, I can provide more code if it makes it easier?
Must these two fields be in a form to function properly?
This is my result:

grafik
grafik1262×790 33.9 KB

7

Could you check in debugger if either wiki-editor-init.js or rich-editor-init is loaded?
Meanwhile I can try to dig up some old markup syntax for it :slight_smile:

1 Like
8

As far as I could find out, rich-editor-init.js is loaded :slight_smile:

9

Here is sanitised version of an old editor markup:

<form action="" class="aui">
    <div class="form-body">
        <div class="field-group aui-field-wikiedit test-input">
            <label for="test">Test</label>
            <div class="jira-wikifield" renderer-type="atlassian-wiki-renderer" issue-key="TEST-1" resolved="">
                <div class="wiki-edit">
                    <div class="wiki-edit-content">
                        <textarea class="textarea long-field wiki-textfield mentionable" cols="60" id="test" name="test" rows="10" wrap="virtual" data-projectkey="TEST" data-issuekey="TEST-1" resolved=""></textarea>
                        <div class="rte-container">
                            <rich-editor contenteditable="true" data-issue-key="TEST-1" data-content-present="true" tabindex="-1"></rich-editor>
                        </div>
                        <div class="content-inner">
                        </div>
                    </div>
                </div>
                <div class="field-tools">
                    <dl id="wiki-prefs" class="wiki-js-prefs" style="display:none">
                        <dt>trigger</dt>
                        <dd>test-preview_link</dd>
                        <dt>fieldId</dt>
                        <dd>test</dd>
                        <dt>fieldName</dt>
                        <dd>test</dd>
                        <dt>rendererType</dt>
                        <dd>atlassian-wiki-renderer</dd>
                        <dt>issueKey</dt>
                        <dd>TEST-1</dd>
                    </dl>
                    <button class="jira-icon-button fullscreen wiki-preview" type="button">
                        <span class="aui-icon wiki-renderer-icon">Preview</span>
                    </button>
                    <a class="help-lnk" id="viewHelp" href="/jira/secure/WikiRendererHelpAction.jspa?section=texteffects" title="Get local help about wiki markup help" data-helplink="local"><span class="aui-icon aui-icon-small aui-iconfont-help"></span></a>
                </div>
            </div>
        </div>
    </div>
</form>

As you can see it has a <rich-editor> element with different props inside it. Also contains some wiki-* classes and props like renderer-type="atlassian-wiki-renderer".
Hope it helps :crossed_fingers:

1 Like
10

This did definitely help! I thank you so much for this and your effort!

1 Like