出家如初,成佛有余

在jira中集成tinymce 支持wysiwyg功能

Posted in Uncategorized by chuanliang on 2008/02/18

    由于我使用的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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

  • 修改国际化资源文件/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>.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }
  • 创建/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; }
}
  • .csharpcode, .csharpcode pre
    {
    font-size: small;
    color: black;
    font-family: consolas, “Courier New”, courier, monospace;
    background-color: #ffffff;
    /*white-space: pre;*/
    }
    .csharpcode pre { margin: 0em; }
    .csharpcode .rem { color: #008000; }
    .csharpcode .kwrd { color: #0000ff; }
    .csharpcode .str { color: #006080; }
    .csharpcode .op { color: #0000c0; }
    .csharpcode .preproc { color: #cc6633; }
    .csharpcode .asp { background-color: #ffff00; }
    .csharpcode .html { color: #800000; }
    .csharpcode .attr { color: #ff0000; }
    .csharpcode .alt
    {
    background-color: #f4f4f4;
    width: 100%;
    margin: 0em;
    }
    .csharpcode .lnum { color: #606060; }

    编译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,内容如下
    .csharpcode, .csharpcode pre
    {
    font-size: small;
    color: black;
    font-family: consolas, “Courier New”, courier, monospace;
    background-color: #ffffff;
    /*white-space: pre;*/
    }
    .csharpcode pre { margin: 0em; }
    .csharpcode .rem { color: #008000; }
    .csharpcode .kwrd { color: #0000ff; }
    .csharpcode .str { color: #006080; }
    .csharpcode .op { color: #0000c0; }
    .csharpcode .preproc { color: #cc6633; }
    .csharpcode .asp { background-color: #ffff00; }
    .csharpcode .html { color: #800000; }
    .csharpcode .attr { color: #ff0000; }
    .csharpcode .alt
    {
    background-color: #f4f4f4;
    width: 100%;
    margin: 0em;
    }
    .csharpcode .lnum { color: #606060; }

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

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

  • 重启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皆可。

jira

wysiwyg

3、参考文章

http://confluence.atlassian.com/display/JIRACOM/WYSIWYG+Editor+in+Jira 

http://tinymce.moxiecode.com/documentation.php

No Responses Yet

Subscribe to comments with RSS.

  1. 丁香社区 said, on 2008/05/08 at 18:16

    支持大大,也到丁香社区来看看!

  2. 丁香社区 said, on 2008/05/08 at 19:50

    呵呵,说到点子上了,感谢您的资料,也请到丁香社区来看看!


发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: