How to add rich text editor / wiki markup in velocity

[alexis]

Hi everyone,

It's been days I've been looking for a solution for this !

When you create an issue in JIRA you can describe the bug in kind of rich text editor called wiki markup I think.

I'm actually devellopping a plugin for JIRA and I want to add one of them in a velocity template.

I'm pretty sure there's a way to do this but I can't find it.

Thanks for your precious help !

[alexis · Accepted solution]

Thanks for your help guys, I don't understand everything but it partially work.

I checked edit-textarea.vm and description-edit.vm and it gave me some information.


In my Java file I have my renderer and my rendererDescriptor, no problem with that.
In velocity things are a little different...


The problem is that I don't understand all the parameters, actually I filled with some shitty stuff but it's not perfect.
Here's what's the doc is asking :

public String getEditVM (String value, String issueKey, String rendererType, String fieldId, String fieldName, Map params, boolean singleLine)


Value : Ok, it's the default content of my window, no problem.

IssueKey : What ? I don't work on an issue, why should I need this ? How do I fill it ?

rendererType : Well I filled it with atlassian-wiki-renderer hoping it's the good answer.

fieldId : why are we talking of field over here ?

field : Same question.

rendererParams : ok it's for customing the window.

singleLine : ok, once again it's the appearance of the window I guess.


So actually a window appear on my Web Page, it's a kind of text box with two icons below.

However, I don't get all the fancy options above to write in bold etc.

if I write a word between two asterisk it's not bold either.

I need this two things because I want to edit my text with options and also copy and paste it to word for example.


Any tips guys ? :)

[Andreas Ebert]

Concerning the parameters: * issueKey: You can leave that empty. * rendererType​: Yes, must be "atlassian-wiki-renderer​". * fieldId​: The id​ and name​ of the <textarea>​ element. Any value you want. Your Action​ should have an appropriate setter​-method to retrieve the client's value. * fieldName​: You can leave that empty. Concerning the 2nd question: JIRA's editor is not a real rich-text / WYSIWYG-editor, like for example the editor here on Answers. You have to click the blue preview-button (1 of the "two icons below") in order to see the rendered content. The editor you're seeing (with the 2 buttons) is the final, complete and correct JIRA editor.

[Andreas Ebert]

If you found my answer useful, please consider accepting it by ticking the checkmark next to it.

[fcri]

Hi there,

I'm having some problems with this. Can you help me?

Best Regards,

[alexis]

Thanks for everything guys, now it's working perfectly.

But I have one last question, here's the thing :

On the wiki renderer I display text and issues keys. When I click on the left button below I have some beautiful text with colors and stuff. Issue keys are also transformed in links. No problem with that but some of them are barred because they're closed / finish or equivalent.
I don't want them to be barred.
I looked on the documentation thinking about the rendererParams but I don't get interesting things or I don't understand them.
I didn't find anything usefull here : https://confluence.atlassian.com/conf54/confluence-user-s-guide/advanced-and-special-uses-of-confluence/working-with-confluence-markup/confluence-wiki-markup-for-macros

But maybe the answer is not based on parameters.

As always, thanks for your help !

[Andreas Ebert]

JIRA's wiki-renderer renders all issue-link as strike-through (what you call "barred") when the issue's resolution is set. That can't be changed. Your link does not apply here. It is about Confluence macros, NOT about JIRA's wiki-renderer.

[Rbig]

Hi everyone,

I have a question for you, how i can get the value of Jira renderer (html) in my servlet ?

It's been days I've been looking for a solution for this !

Thanks for your help !

[Taha Khanzada]

Yes, agree with Andreas. 

You can also refer below example

#set ($rendererManager = $componentManager.getRendererManager())
#set ($wikiRenderer = $rendererManager.getRendererForType('atlassian-wiki-renderer'))
#set ($ircontext = $issue.getIssueRenderContext())
 
#if ($customFieldManager.getCustomFieldObject("customfield_1000"))
    #set ($cfCustomFieldName = $customFieldManager.getCustomFieldObject("customfield_1000").getFieldName())
    #set ($cfCustomFieldVal = $issue.getCustomFieldValue($customFieldManager.getCustomFieldObject("customfield_1000")))
    
#end
 
#if ($cfCustomFieldVal)
 <tr>
    <th>$cfCustomFieldName:</th>
    <td>$wikiRenderer.render($cfCustomFieldVal, $ircontext)
    </td>
 </tr>
#end

[Andreas Ebert]

Your code does not quite what OP wants. He wants an editor, i.e. an EDIT view. In contrast, your code renders wiki-markup and displays it statically, i.e. a VIEW view.

[abdul hafiz]

Thanks Taha, this was very helpful to me. I had a velocity template in which I wanted to render only one area of the text with wiki style renderer and your code was a perfect solution that I was looking for. 

[Andreas Ebert]

If you have access to JIRA's source code, take a look at edit-textarea.vm and description-edit.vm.

Basically, you use JiraRendererModuleDescriptor#getEditVM in your Velocity template to generate the HTML.

The wiki-renderer you get like so:

JiraRendererPlugin renderer = rendererManager.getRendererForType("atlassian-wiki-renderer");
JiraRendererModuleDescriptor rendererDescriptor = renderer.getDescriptor();

One important parameter of the getEditVM() method is the Map params. For example, it must contain an entry with key mentionable and boolean value true in order to enable @-mentions. For more possible entries, take a look at edit-textarea.vm.