由于我使用的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皆可。
3、参考文章
http://confluence.atlassian.com/display/JIRACOM/WYSIWYG+Editor+in+Jira
http://tinymce.moxiecode.com/documentation.php
转载请注明:出家如初,成佛有余 » 在jira中集成tinymce 支持wysiwyg功能