Max's Blog

Jira上面用上WYSIWYG编辑器，copy些资料的时候就能爽一点了 ，找了一下，官网上面就有实现，不过有点旧，有些地方也不完全，下面是一点笔记。。

This was a real hassle, and I had hoped to make it a plugin, but I could not figure out how to do some things without changing the Jira Code, so here is where it stands.

We wanted a wysiwyg renderer for our Customer Service folks to be able to copy and paste rich text from Lotus Notes email messages and other items.
TinyMCE seems to be able to do everything we want.
I did see some TinyMCE code in JIRA, but do not know what it’s for and it doesn’t seem to be used.
Anyway, Essentially, we create a new Renderer that does not encode the text in a field to be displayed as text.
Also, we had to add the initialization for TinyMCE to the header jsp.
If you reinitialize, it screws up, so this needs to be done in a single place per page. I could not find a better location than the header.jsp
You also need to add the text fields to the list of things to be rendered by TinyMCE. This is in the edit velocity file.

If anyone can see how to make this a standalone plugin, that would be great, but between the Jira plugin requirements and TinyMCE requirements, it kept running into roadblocks.

To implement do the following:

1: Download TinyMCE from http://tinymce.moxiecode.com/
2: Extract it to jira/src/webapp/includes/js
3: Add the following to the /jira/src/webapp/includes/decorators/header.jsp in a spot where other scripts are being loaded

<script language=”JavaScript” type=”text/javascript” src=”<%= webResourceManager.getStaticResourcePrefix() %>/includes/js/tinymce/jscripts/tiny_mce/tiny_mce.js”></script>
<script language=”javascript” type=”text/javascript”>
tinyMCE.init(
{ theme : “simple”, mode : “exact”
);
</script>

这里记得去改simple的css，要不编辑字体会很小
在 tinymce/jscripts/tiny_mce/themes/simple/css/editor_content.css

4: Add the following to /jira/src/etc/languages/default/com/atlassian/jira/web/action/JiraWebActionSupport.properties

admin.renderer.plugin.wysiwyg.renderer.name=Wysiwyg Style Renderer
admin.renderer.plugin.wysiwyg.renderer.desc=A renderer that will renderer content as entered into a wysiwyg editor.

这步不需要做，新版的jira把languages都封装好了，懒得取改

5: Add the following to /jira/src/etc/java/system-renderers-plugin.xml

<jira-renderer system=”true” key=”jira-wysiwyg-renderer” name=”Wysiwyg Style Renderer”
i18n-name-key=”admin.renderer.plugin.wysiwyg.renderer.name”
class=”com.atlassian.jira.issue.fields.renderer.wysiwyg.WysiwygRenderer”>
<description key=”admin.renderer.plugin.wysiwyg.renderer.desc”>A renderer that will renderer content from a wysiwyg editor.</description>
<resource type=”velocity” name=”edit” location=”/templates/plugins/renderers/wysiwyg/wysiwyg-renderer-edit.vm”/>
</jira-renderer>

6: Create new file /jira/src/java/com/atlassian/jira/issue/fields/renderer/wysiwyg/WysiwygRenderer.java
with the following code

package com.atlassian.jira.issue.fields.renderer.wysiwyg;

import com.atlassian.jira.issue.fields.renderer.JiraRendererPlugin;
import com.atlassian.jira.issue.fields.renderer.IssueRenderContext;
import com.atlassian.jira.plugin.renderer.JiraRendererModuleDescriptor;
import com.atlassian.jira.util.JiraKeyUtils;

/*\*
* A simple text renderer for jira..
\*/
public class WysiwygRenderer implements JiraRendererPlugin
{
public static final String RENDERER_TYPE = “jira-wysiwyg-renderer”;

private JiraRendererModuleDescriptor jiraRendererModuleDescriptor;

public String render(String value, IssueRenderContext context)
{ return JiraKeyUtils.linkBugKeys(value); }
public String renderAsText(String value, IssueRenderContext context)
{ return value; }
public String getRendererType()
{ return RENDERER_TYPE; }
public Object transformForEdit(Object rawValue)
{ return rawValue; }
public Object transformFromEdit(Object editValue)
{ return editValue; }
public void init(JiraRendererModuleDescriptor jiraRendererModuleDescriptor)
{ this.jiraRendererModuleDescriptor = jiraRendererModuleDescriptor; }
public JiraRendererModuleDescriptor getDescriptor()
{ return jiraRendererModuleDescriptor; }
}

7: Create new file /jira/src/etc/java/templates/plugins/renderers/wysiwyg/wysiwyg-renderer-js.vm
with the following code

tinyMCE.init(
{ mode : “textareas” }

);

8: Create new file View of /jira/src/etc/java/templates/plugins/renderers/wysiwyg/wysiwyg-renderer-edit.vm
with the following code

<DIV style=”width:90%”>
#if($singleLine)
<input style=”width:100%”
type=”text”
name=”$fieldId”
value=”$textutils.htmlEncode($!value)”
id=”$fieldId”
class=”textfield”
#if($maxlength)maxlength=”$maxlength”#end
/>
#else
<textarea style=”width:100%”
name=”$fieldId”
id=”$fieldId”
#if($rows)rows=”$rows”#end
#if($wrap)wrap=”$wrap”#end
#if($cols)cols=”$cols”#end
#if($accesskey)accesskey=”$accesskey”#end
class=”textarea”
>$textutils.htmlEncode($!value)</textarea>
#end
</DIV>
<script language=”javascript” type=”text/javascript”>
tinyMCE.execCommand(‘mceAddControl’, true, “$fieldId”);
</script>

不需要重新打包，全部都在服务器那边解压好的地方找，/jira/src/etc/java对应就是WEB-INF/classes的目录了，改好之后重启或者让它自动reload，然后要到jira配置页面里面的Field Configurations->

  

View Field Configuration

 

绿色字的几项选对新的renderers，这里找了我n久才找到，郁闷的狠。。。