在jira中集成tinymce 支持wysiwyg功能

Posted 02月 18, 2008

由于我使用的3.9版本的jira本身的编辑器缺省为textarea，在录入缺陷及添加备注时候很不是方便，捣腾了一上午终于把TinyMCE 集成到jira中作为wysiywg编辑器，记录一下过程，其实基本上是按照文章WYSIWYG Editor in Jira 描写的步骤做的，只是按照自己所用的3.9版本的安装包调整了安装步骤及细节。

1、系统环境：

jira版本：atlassian-jira-enterprise-3.9-standalone

jira安装路径：/opt/jira （实际上是tomcat路径，jira的webapp应用在/opt/jira/atlassian-jira下）

2、安装步骤

从http://tinymce.moxiecode.com/下载TinyMCE
把TinyMCE解压到/opt/jira/atlassian-jira/includes/js
在/opt/jira/atlassian-jira/includes/decorators/header.jsp中添加TinyMCE的js代码，采用的是TinyMCE的Full Feature的代码，可以参看tinymce的文档，按照自己要求调整一下TinyMCE的属性。

 <script language=“JavaScript” type=“text/javascript” src=“<%=request.getContextPath()%>/includes/js/tinymce/jscripts/tiny_mce/tiny_mce.js”></script>
<script language=“javascript” type=“text/javascript”>
tinyMCE.init({
        mode : “textareas”,
        theme : “advanced”,
        plugins : “table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu”,
        theme_advanced_buttons1_add_before : “save,separator”,
        theme_advanced_buttons1_add : “fontselect,fontsizeselect”,
        theme_advanced_buttons2_add : “separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor”,
        theme_advanced_buttons2_add_before: “cut,copy,paste,separator,search,replace,separator”,
        theme_advanced_buttons3_add_before : “tablecontrols,separator”,
        theme_advanced_buttons3_add : “emotions,iespell,flash,advhr,separator,print”,
        theme_advanced_toolbar_location : “top”,
        theme_advanced_toolbar_align : “left”,
        theme_advanced_statusbar_location : “bottom”,
        plugin_insertdate_dateFormat : “%Y-%m-%d”,
        plugin_insertdate_timeFormat : “%H:%M:%S”,
        height:“350px”,
        width:“550px”,
        extended_valid_elements : “a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]”,
});
</script>

修改国际化资源文件/opt/jira/atlassian-jira/WEB-INF/lib/language_default.jar 中的com/atlassian/jira/web/action/JiraWebActionSupport和/opt/jira/atlassian-jira/WEB-INF/lib/language_zh_CN.jar中的com/atlassian/jira/web/action/JiraWebActionSupport_zh_CN.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.

修改/opt/jira/atlassian-jira/WEB-INF/classes/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>

创建/opt/jira/atlassian-jira/WEB-INF/classes/com/atlassian/jira/issue/fields/renderer/wysiwyg/WysiwygRenderer.java ，内容如下

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; }
}

编译WysiwygRenderer.java

export classpath=/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-bandana-0.1.13.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-cache-servlet-0.5.4.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-configurableobjects-0.4.22.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-core-2007-04-23.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-extras-0.7.29.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-jdk-utilities-0.1.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-jira-rpc-plugin-3.9-1.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-jira-subversion-plugin-0.9.10.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-johnson-2006-11-03.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-mail-2007_03_23.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-ofbiz-0.3.8.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-plugins-2006-11-10.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-profiling-1.1.4.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-renderer-2007.01.17.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-scheduler-2007-04-05.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-tagutil-0.1.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-trackback-2007-01-25.jar:/opt/jira/atlassian-jira/WEB-INF/lib/atlassian-velocity-0.3.19.jar:.:$JAVA_HOME/lib/tools.jar:/opt/jira/atlassian-jira/WEB-INF/classes ;

cd /opt/jira/atlassian-jira/WEB-INF/classes;

javac com/atlassian/jira/issue/fields/renderer/wysiwyg/WysiwygRenderer.java

创建/opt/jira/atlassian-jira/templates/plugins/renderers/wysiwyg/wysiwyg-renderer-js.vm ，内容如下

tinyMCE.init(
{ mode : “textareas” }

);

创建/opt/jira/atlassian-jira/templates/plugins/renderers/wysiwyg/wysiwyg-renderer-edit.vm，内容如下

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

重启tomcat
以管理员登录jira管理界面，查看Renderer是否生效

菜单项System->Plugins->Renderer Plugin->Wysiwyg Style Renderer

配置Renderer：

菜单项Issue Fields->Field Configurations->View Field Configurations->Default Field Configuration，点击在Comment和Description的Renderer属性后，进入”Edit Field Renderer”属性页，选择Wysiwyg Style Renderer皆可。