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

**URL:** <https://community.developer.atlassian.com/t/how-to-initialize-the-wiki-renderer-for-an-admin-plugin/41189>\
**Category:** Jira Server\
**Tags:** atlassian-wiki-renderer, jira-plugin, rich-text\
**Created:** [August 31, 2020, 9:45am UTC](https://community.developer.atlassian.com/t/how-to-initialize-the-wiki-renderer-for-an-admin-plugin/41189 "2020-08-31T09:45:52Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Taylan](https://avatars.discourse-cdn.com/v4/letter/t/41988e/32.png) [@Taylan](https://community.developer.atlassian.com/u/Taylan)\
**Post date:** [August 31, 2020, 9:45am UTC](https://community.developer.atlassian.com/t/how-to-initialize-the-wiki-renderer-for-an-admin-plugin/41189/1 "2020-08-31T09:45:52Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Taylan](https://avatars.discourse-cdn.com/v4/letter/t/41988e/32.png) [@Taylan](https://community.developer.atlassian.com/u/Taylan)\
**Post date:** [September 10, 2020, 12:18pm UTC](https://community.developer.atlassian.com/t/how-to-initialize-the-wiki-renderer-for-an-admin-plugin/41189/2 "2020-09-10T12:18:54Z")

</div>

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):

> **[links - Pastebin.com](https://pastebin.com/b9Nyj20n)**
>
> Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

---

<div class="post-metadata">

**Author:** ![tjoy](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/tjoy/32/36021_2.png) [@tjoy](https://community.developer.atlassian.com/u/tjoy)\
**Post date:** [September 14, 2020, 8:28am UTC](https://community.developer.atlassian.com/t/how-to-initialize-the-wiki-renderer-for-an-admin-plugin/41189/3 "2020-09-14T08:28:17Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Taylan](https://avatars.discourse-cdn.com/v4/letter/t/41988e/32.png) [@Taylan](https://community.developer.atlassian.com/u/Taylan)\
**Post date:** [September 14, 2020, 10:11am UTC](https://community.developer.atlassian.com/t/how-to-initialize-the-wiki-renderer-for-an-admin-plugin/41189/4 "2020-09-14T10:11:43Z")

</div>

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:

```auto
$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

---

<div class="post-metadata">

**Author:** ![tjoy](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/tjoy/32/36021_2.png) [@tjoy](https://community.developer.atlassian.com/u/tjoy)\
**Post date:** [September 14, 2020, 12:02pm UTC](https://community.developer.atlassian.com/t/how-to-initialize-the-wiki-renderer-for-an-admin-plugin/41189/5 "2020-09-14T12:02:56Z")

</div>

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 🤞

---

<div class="post-metadata">

**Author:** ![Taylan](https://avatars.discourse-cdn.com/v4/letter/t/41988e/32.png) [@Taylan](https://community.developer.atlassian.com/u/Taylan)\
**Post date:** [September 14, 2020, 12:42pm UTC](https://community.developer.atlassian.com/t/how-to-initialize-the-wiki-renderer-for-an-admin-plugin/41189/6 "2020-09-14T12:42:07Z")

</div>

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](https://global.discourse-cdn.com/atlassiandeveloper/original/3X/b/6/b60f86de2c031392e3f70a3bb0394596e1d183a3.png)

---

<div class="post-metadata">

**Author:** ![tjoy](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/tjoy/32/36021_2.png) [@tjoy](https://community.developer.atlassian.com/u/tjoy)\
**Post date:** [September 15, 2020, 11:21am UTC](https://community.developer.atlassian.com/t/how-to-initialize-the-wiki-renderer-for-an-admin-plugin/41189/7 "2020-09-15T11:21:48Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Taylan](https://avatars.discourse-cdn.com/v4/letter/t/41988e/32.png) [@Taylan](https://community.developer.atlassian.com/u/Taylan)\
**Post date:** [September 15, 2020, 12:58pm UTC](https://community.developer.atlassian.com/t/how-to-initialize-the-wiki-renderer-for-an-admin-plugin/41189/8 "2020-09-15T12:58:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tjoy](https://sea1.discourse-cdn.com/atlassiandeveloper/user_avatar/community.developer.atlassian.com/tjoy/32/36021_2.png) [@tjoy](https://community.developer.atlassian.com/u/tjoy)\
**Post date:** [September 16, 2020, 12:34pm UTC](https://community.developer.atlassian.com/t/how-to-initialize-the-wiki-renderer-for-an-admin-plugin/41189/9 "2020-09-16T12:34:57Z")

</div>

Here is sanitised version of an old editor markup:

```auto
<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 🤞

---

<div class="post-metadata">

**Author:** ![Taylan](https://avatars.discourse-cdn.com/v4/letter/t/41988e/32.png) [@Taylan](https://community.developer.atlassian.com/u/Taylan)\
**Post date:** [September 16, 2020, 12:49pm UTC](https://community.developer.atlassian.com/t/how-to-initialize-the-wiki-renderer-for-an-admin-plugin/41189/10 "2020-09-16T12:49:33Z")

</div>

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