Jan 03 2008

use TinyMCE in Jira 3.12

Category: 技术ssmax @ 14:30:54

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”>
{ theme : “simple”, mode : “exact”

在 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.


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”
<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”/>

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

{ 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%”>
<input style=”width:100%”
<textarea style=”width:100%”
<script language=”javascript” type=”text/javascript”>
tinyMCE.execCommand(‘mceAddControl’, true, “$fieldId”);

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


View Field Configuration



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.