Mantis集成富文本插件

Mantis集成富文本插件说明

原生安装的mantis在使用过程中，图片只能通过附件的方式添加，在使用过程中不是很友好，集成富文本插件后，图片可直接粘贴至描述内容框中，便于使用及后续阅读。

1. 下载ueditor

下载地址：http://ueditor.baidu.com/website/download.html
我下的是ueditor1_4_3_3-utf8-php版本。

2. 上传

在/var/www/html/目录下创建ueditor目录，将代码拷贝到该目标下并赋权

# chmod a+rwx -R /var/www/html/ueditor/

3. 修改相关页面

3.1 修改“提交问题”页面

找到bug_report_page.php文件，拉到最后，在"layout_page_end();"后面增加：

?>
<!-- 配置文件 -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('description');
document.getElementById('description').className='edui-default';</script>

上传后运行代码报权限不足。到core目录下找到http_api.php文件，打开后找到“http_csp_add( ‘script-src’, “‘self’” );”，在它后面增加两行：

http_csp_add( 'script-src', "'unsafe-inline'" );
http_csp_add( 'script-src', "'unsafe-eval'" );

上传后ueditor已经能显示并使用，但是太宽了，我们再来改下样式。找到ueditor目录下ueditor.config.js文件，打开后找到92行“,initialFrameWidth:1000”，把高度和宽度的注释去掉并上传，如图所示：

是否启用元素路径，默认是显示，可以关闭：true->false;

修改后效果

3.2. 修改“查看问题”页面

找到“bug_view_inc.php”232行，将代码修改为：

$t_description = $t_show_description ? string_restore_valid_html_tags( $t_bug->description ) : '';

图片显示过大，我们再来修改下图片显示样式。找到ueditor下的“themes”目录下“iframe.css”文件，打开应该是个空文件，加入如下代码：

img {  max-width: 100%; /*图片自适应宽度*/
}

上传该文件。再打开“bug_view_inc.php”文件，在文件末尾加入如下代码并上传：

?><link rel="stylesheet" type="text/css" href="/ueditor/themes/iframe.css" /

修改后效果

3.3. 修改“编辑问题”页面

打开“bug_update_page.php”页面，在最底部增加如下代码：

?><!-- 配置文件 -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('description');
document.getElementById('description').className='edui-default';
var ue4 = UE.getEditor('bugnote_text');
document.getElementById('bugnote_text').className='edui-default';
</script>

3.4. 修改“注释”

“提交问题”页面没有注释功能，我找到并修改了“查看问题”、“编辑问题”、“编辑注释”三个页面。

3.4.1 “查看问题”页面注释部分

在“bug_view_inc.php”页面底部增加如下代码，这些代码能让页面底部的“添加注释”功能成为富文本框：

?><link rel="stylesheet" type="text/css" href="/ueditor/themes/iframe.css" /
<!-- 配置文件 -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue4 = UE.getEditor('bugnote_text');
document.getElementById('bugnote_text').className='edui-default';</script>

打开“bugnote_view_inc.php”文件，找到307行改成如下，这能使页面中下部的注释列表正确显示HTML：

echo string_restore_valid_html_tags( $t_activity['note']->note );

修改后效果

3.4.2. “编辑问题”页面注释部分

在“bug_update_page.php”文件页面底部之前加的JS代码部分增加：

var ue4 = UE.getEditor('bugnote_text');
document.getElementById('bugnote_text').className='edui-default';

修改后效果

3.4.3. “编辑注释”页面

打开“bugnote_edit_page.php”文件，在最后加上如下代码：

?><!-- 配置文件 -->
<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue4 = UE.getEditor('description');
document.getElementById('description').className='edui-default';</script>