MantisBT的配置与添加富文本编辑器wangEditor 5

MantisBT是一个开源缺陷管理系统，最近工作当中用到这个比较多，把配置心得和添加富文本编辑器支持的方法分享出来。

配置好的效果如下图：

重置用户密码

MantisBT默认情况下重置密码是通过邮件来发送密码信息的，在禁用邮件功能的主机上使用等情况下十分不方便。

可以通过修改config_default_inc.php来解决。

// 将 
$g_send_reset_password = ON; 
$g_enable_email_notification = ON; 

// 修改为 
$g_send_reset_password = OFF; 
$g_enable_email_notification = OFF;

// 将

$g_send_reset_password = ON;

$g_enable_email_notification = ON;

// 修改为

$g_send_reset_password = OFF;

$g_enable_email_notification = OFF;

修改后，使用管理员账号登录系统，重置用户密码，用户密码将改为空，被重置的用户使用空密码登录系统后自行修改即可。

开启用户头像及显示真实姓名

先在系统内将Gravatar头像插件开启，然后修改config_default_inc.php文件。

// 将
$g_show_avatar = OFF; // 显示头像
$g_show_realname = OFF; // 显示真实姓名
// 修改为
$g_show_avatar = ON;
$g_show_realname = ON;

// 将

$g_show_avatar = OFF; // 显示头像

$g_show_realname = OFF; // 显示真实姓名

// 修改为

$g_show_avatar = ON;

$g_show_realname = ON;

Gravatar在国内因为周所周知的原因，可以更换为镜像源。

修改\plugins\Gravatar\Gravatar.php

// 将 
const GRAVATAR_URL = 'https://secure.gravatar.com/';
 // 修改为
const GRAVATAR_URL = 'https://sdn.geekzu.org/';

// 将

const GRAVATAR_URL = 'https://secure.gravatar.com/';

// 修改为

const GRAVATAR_URL = 'https://sdn.geekzu.org/';

也可以搞一个头像“缓存”，在安装目录下新建一个名为 pp 的文件夹，并设置好权限。

同样是修改\plugins\Gravatar\Gravatar.php

function user_get_avatar($p_event, $p_user_id, $p_size = 80)
    {

        $t_default_avatar = plugin_config_get('default_avatar');

        # Default avatar is either one of Gravatar's options, or
        # assumed to be an URL to a default avatar image
        $t_default_avatar = urlencode($t_default_avatar);
        $t_rating = plugin_config_get('rating');

        if (user_exists($p_user_id)) {
            $t_email_hash = md5(strtolower(trim(user_get_email($p_user_id))));
        } else {
            $t_email_hash = md5('generic-avatar-since-user-not-found');
        }

        $d_img = getcwd() . "/pp/" . $t_email_hash . ".jpg";

        if (is_file($d_img)) {
            $t_avatar_url = "/pp/" . $t_email_hash . ".jpg";

            $t_avatar = new Avatar();
            $t_avatar->image = $t_avatar_url;
        } else {

            echo self::GRAVATAR_URL . 'avatar/' . $t_email_hash;
            # Build Gravatar URL
            $t_avatar_url = self::GRAVATAR_URL .
                'avatar/' . $t_email_hash . '?' .
                http_build_query(
                    array(
                        'd' => $t_default_avatar,
                        'r' => $t_rating,
                        's' => $p_size,
                    )
                );

            $t_avatar = new Avatar();
            $t_avatar->image = $t_avatar_url;



            self::download(self::GRAVATAR_URL . 'avatar/' . $t_email_hash, self::GRAVATAR_URL, $d_img);
        }
        return $t_avatar;
    }

function user_get_avatar($p_event, $p_user_id, $p_size = 80)

{

$t_default_avatar = plugin_config_get('default_avatar');

# Default avatar is either one of Gravatar's options, or

# assumed to be an URL to a default avatar image

$t_default_avatar = urlencode($t_default_avatar);

$t_rating = plugin_config_get('rating');

if (user_exists($p_user_id)) {

$t_email_hash = md5(strtolower(trim(user_get_email($p_user_id))));

} else {

$t_email_hash = md5('generic-avatar-since-user-not-found');

}

$d_img = getcwd() . "/pp/" . $t_email_hash . ".jpg";

if (is_file($d_img)) {

$t_avatar_url = "/pp/" . $t_email_hash . ".jpg";

$t_avatar = new Avatar();

$t_avatar->image = $t_avatar_url;

} else {

echo self::GRAVATAR_URL . 'avatar/' . $t_email_hash;

# Build Gravatar URL

$t_avatar_url = self::GRAVATAR_URL .

'avatar/' . $t_email_hash . '?' .

http_build_query(

array(

'd' => $t_default_avatar,

'r' => $t_rating,

's' => $p_size,

)

);

$t_avatar = new Avatar();

$t_avatar->image = $t_avatar_url;

self::download(self::GRAVATAR_URL . 'avatar/' . $t_email_hash, self::GRAVATAR_URL, $d_img);

}

return $t_avatar;

}

最后新增一个下载头像的函数

function download( $url, $referer, $imagePath  )
    {
        $fpLocal = @fopen( $imagePath, 'w' );
        if( !$fpLocal ) {
            return false;
        }

        if( is_callable('curl_init') ) {
            $ch = curl_init();
            curl_setopt( $ch, CURLOPT_URL, $url );
            curl_setopt( $ch, CURLOPT_REFERER, $referer );
            curl_setopt( $ch, CURLOPT_CONNECTTIMEOUT, 10 );
            curl_setopt( $ch, CURLOPT_FOLLOWLOCATION, 1 );
            curl_setopt( $ch, CURLOPT_HEADER, 0 );
            curl_setopt( $ch, CURLOPT_FILE, $fpLocal );
            if( !curl_exec($ch) ) {
                fclose( $fpLocal );
                curl_close( $ch );
                return false;
            }
            curl_close( $ch );
        }else {
            $opts = array(
                'http' => array(
                    'method' => "GET",
                    'header' => "Referer: $referer\r\n"
                )
            );

            $context = stream_context_create( $opts );
            $fpRemote = @fopen( $url, 'r', false, $context );
            if( !$fpRemote ) {
                fclose( $fpLocal );
                return false;
            }

            while( !feof( $fpRemote ) ) {
                fwrite( $fpLocal, fread($fpRemote, 8192) );
            }
            fclose( $fpRemote );
        }

        fclose( $fpLocal );
        return true;
    }

function download( $url, $referer, $imagePath )

{

$fpLocal = @fopen( $imagePath, 'w' );

if( !$fpLocal ) {

return false;

}

if( is_callable('curl_init') ) {

$ch = curl_init();

curl_setopt( $ch, CURLOPT_URL, $url );

curl_setopt( $ch, CURLOPT_REFERER, $referer );

curl_setopt( $ch, CURLOPT_CONNECTTIMEOUT, 10 );

curl_setopt( $ch, CURLOPT_FOLLOWLOCATION, 1 );

curl_setopt( $ch, CURLOPT_HEADER, 0 );

curl_setopt( $ch, CURLOPT_FILE, $fpLocal );

if( !curl_exec($ch) ) {

fclose( $fpLocal );

curl_close( $ch );

return false;

}

curl_close( $ch );

}else {

$opts = array(

'http' => array(

'method' => "GET",

'header' => "Referer: $referer\r\n"

)

);

$context = stream_context_create( $opts );

$fpRemote = @fopen( $url, 'r', false, $context );

if( !$fpRemote ) {

fclose( $fpLocal );

return false;

}

while( !feof( $fpRemote ) ) {

fwrite( $fpLocal, fread($fpRemote, 8192) );

}

fclose( $fpRemote );

}

fclose( $fpLocal );

return true;

}

只能说是非常简易的缓存了，把头像下回来，本地有时显示本地的，没有再去请求一个。

回头也许加一个过期时间并处理。

添加wangEditor 5富文本编辑器支持

MantisBT自带的编辑器可以说是非常的简单了，可以添加一个富文本编辑器，这样就可以实现新建一个问题之后把该问题当作任务列表或日志记录来用。

经过一番选型，最后选择了开源简单的wangEditor 5。

这里就不使用CDN了，首先将index.js文件放入/js路径下，然后将CSS文件改个名字如we_style.css放入/css/路径下，并编辑/css/default.css文件，添加以下样式：

#editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* 按需定义 */
  }
#toolbar-container, #toolbar-container-bugnote-add {
    border-bottom: 1px solid #ccc; 
}
#editor-container, #editor-container-bugnote-add {
    height: 350px; }

#editor—wrapper {

border: 1px solid #ccc;

z-index: 100; /* 按需定义 */

}

#toolbar-container, #toolbar-container-bugnote-add {

border-bottom: 1px solid #ccc;

}

#editor-container, #editor-container-bugnote-add {

height: 350px; }

获取单独的JS/CSS文件的方法，可以参考官方文档：https://www.wangeditor.com/v5/installation.html

引入JS文件与CSS文件

修改core/html_api.php文件，找到html_javascript_link( 'common.js' );在下方添加：

echo "\t" . '<link rel="stylesheet" type="text/css" href="/css/we_style.css"></link>' . "\n";
html_javascript_link( 'index.js' );  //编辑器JS
html_javascript_link( 'we_init.js' ); // 初始化及设定编辑器的JS

echo "\t" . '<link rel="stylesheet" type="text/css" href="/css/we_style.css"></link>' . "\n";

html_javascript_link( 'index.js' ); //编辑器JS

html_javascript_link( 'we_init.js' ); // 初始化及设定编辑器的JS

初始化编辑器

由于MantisBT的安全性设计，禁止行内JS执行，所以单独写成文件并加载。

we_init.js内容如下：

$(document).ready(function () {
    let E = window.wangEditor;
    let x = $("textarea#description")
    let y = $("textarea#bugnote_text")

    if ($("#editor-container").length > 0) {

        let editor_bug_report = E.createEditor({
            selector: '#editor-container',
            html: x.val(),
            config: {
                placeholder: '',
                onChange(editor) {
                    const html = editor.getHtml()
                    x.val(html)
                },
            },
            mode: 'default', // or 'simple'
        })

        let toolbar_bug_report = E.createToolbar({
            editor: editor_bug_report,
            selector: '#toolbar-container',
            config: {},
            mode: 'default', // or 'simple'
        })
    }

    if ($("#editor-container-bugnote-add").length > 0) {
        let editor_bug_note = E.createEditor({
            selector: '#editor-container-bugnote-add',
            html: y.val(),
            config: {
                placeholder: '',
                onChange(editor) {
                    const html = editor.getHtml()
                    y.val(html)
                },
            },
            mode: 'default', // or 'simple'
        })

        let toolbar_bug_note = E.createToolbar({
            editor: editor_bug_note,
            selector: '#toolbar-container-bugnote-add',
            config: {},
            mode: 'default', // or 'simple'
        })
    }
})

$(document).ready(function () {

let E = window.wangEditor;

let x = $("textarea#description")

let y = $("textarea#bugnote_text")

if ($("#editor-container").length > 0) {

let editor_bug_report = E.createEditor({

selector: '#editor-container',

html: x.val(),

config: {

placeholder: '',

onChange(editor) {

const html = editor.getHtml()

x.val(html)

mode: 'default', // or 'simple'

})

let toolbar_bug_report = E.createToolbar({

editor: editor_bug_report,

selector: '#toolbar-container',

config: {},

mode: 'default', // or 'simple'

})

}

if ($("#editor-container-bugnote-add").length > 0) {

let editor_bug_note = E.createEditor({

selector: '#editor-container-bugnote-add',

html: y.val(),

config: {

placeholder: '',

onChange(editor) {

const html = editor.getHtml()

y.val(html)

mode: 'default', // or 'simple'

})

let toolbar_bug_note = E.createToolbar({

editor: editor_bug_note,

selector: '#toolbar-container-bugnote-add',

config: {},

mode: 'default', // or 'simple'

})

}

})

将编辑器添加到页面中

这里修改的文件和地方比较多，且会修改输出，可能会使系统安全性降低，请酌情使用。

bug_report_page.php中找到如下代码：

<td>
	<?php # Newline after opening textarea tag is intentional, see #25839 ?>
    <textarea class="form-control" <?php echo helper_get_tab_index() ?> id="description" name="description" cols="80" rows="10" required>
        <?php echo string_textarea( $f_description ) ?>
    </textarea>
</td>

<td>

<?php # Newline after opening textarea tag is intentional, see #25839 ?>

<textarea class="form-control" <?php echo helper_get_tab_index() ?> id="description" name="description" cols="80" rows="10" required>

<?php echo string_textarea( $f_description ) ?>

</textarea>

</td>

修改为：

<td>
        <div id="editor—wrapper">
            <div id="toolbar-container"><!-- 工具栏 --></div>
            <div id="editor-container"><!-- 编辑器 --></div>
         </div>
	<?php # Newline after opening textarea tag is intentional, see #25839 ?>
    <textarea class="form-control" <?php echo helper_get_tab_index() ?> id="description" name="description" cols="80" rows="10" required style="display: none">
        <?php echo string_textarea( $f_description ) ?>
    </textarea>
</td>

<td>

</div>

<?php # Newline after opening textarea tag is intentional, see #25839 ?>

<textarea class="form-control" <?php echo helper_get_tab_index() ?> id="description" name="description" cols="80" rows="10" required style="display: none">

<?php echo string_textarea( $f_description ) ?>

</textarea>

</td>

bug_update_page.php 中找到如下代码：

# Description
if( $t_show_description ) {
	echo '<tr>';
	echo '<th class="category">';
	echo '<span class="required">*</span> ';
	echo '<label for="description">' . lang_get( 'description' ) . '</label>';
	echo '</th>';
	echo '<td colspan="5">';
	echo '<textarea class="form-control" required ', helper_get_tab_index(),
		' cols="80" rows="10" id="description" name="description">', "\n",
		$t_description_textarea, '</textarea>';
	echo '</td></tr>';
}

# Description

if( $t_show_description ) {

echo '<tr>';

echo '<th class="category">';

echo '<span class="required">*</span> ';

echo '<label for="description">' . lang_get( 'description' ) . '</label>';

echo '</th>';

echo '<td colspan="5">';

echo '<textarea class="form-control" required ', helper_get_tab_index(),

' cols="80" rows="10" id="description" name="description">', "\n",

$t_description_textarea, '</textarea>';

echo '</td></tr>';

}

修改为：

# Description
if( $t_show_description ) {
	echo '<tr>';
	echo '<th class="category">';
	echo '<span class="required">*</span> ';
	echo '<label for="description">' . lang_get( 'description' ) . '</label>';
	echo '</th>';
	echo '<td colspan="5">';
    echo '<div id="editor—wrapper">
    <div id="toolbar-container"><!-- 工具栏 --></div>
    <div id="editor-container"><!-- 编辑器 --></div>
    </div>';
	echo '<textarea class="form-control" required ', helper_get_tab_index(),
		' cols="80" rows="10" id="description" name="description" style="display:none">', "\n",
		$t_description_textarea, '</textarea>';
	echo '</td></tr>';
}

# Description

if( $t_show_description ) {

echo '<tr>';

echo '<th class="category">';

echo '<span class="required">*</span> ';

echo '<label for="description">' . lang_get( 'description' ) . '</label>';

echo '</th>';

echo '<td colspan="5">';

echo '<div id="editor—wrapper">

</div>';

echo '<textarea class="form-control" required ', helper_get_tab_index(),

' cols="80" rows="10" id="description" name="description" style="display:none">', "\n",

$t_description_textarea, '</textarea>';

echo '</td></tr>';

}

bug_view_inc.php 找到如下代码：

# Description
if( $t_flags['description_show'] && isset( $t_issue['description'] ) ) {
	echo '<tr>';
	echo '<th class="bug-description category">', lang_get( 'description' ), '</th>';
	echo '<td class="bug-description" colspan="5">', string_display_links( $t_issue['description'] ), '</td>';
	echo '</tr>';
}

# Description

if( $t_flags['description_show'] && isset( $t_issue['description'] ) ) {

echo '<tr>';

echo '<th class="bug-description category">', lang_get( 'description' ), '</th>';

echo '<td class="bug-description" colspan="5">', string_display_links( $t_issue['description'] ), '</td>';

echo '</tr>';

}

修改为：

# Description
if( $t_flags['description_show'] && isset( $t_issue['description'] ) ) {
	echo '<tr>';
	echo '<th class="bug-description category">', lang_get( 'description' ), '</th>';
	echo '<td class="bug-description" colspan="5">', /*string_display_links( $t_issue['description'] )*/ $t_issue['description'], '</td>';
	echo '</tr>';
}

# Description

if( $t_flags['description_show'] && isset( $t_issue['description'] ) ) {

echo '<tr>';

echo '<th class="bug-description category">', lang_get( 'description' ), '</th>';

echo '<td class="bug-description" colspan="5">', /*string_display_links( $t_issue['description'] )*/ $t_issue['description'], '</td>';

echo '</tr>';

}

bugnote_add_inc.php找到如下代码：

<tr>
	<th class="category" width="15%">
			<?php echo lang_get( 'bugnote' ) ?>
	</th>
	<td width="85%">
			<textarea name="bugnote_text" id="bugnote_text" class="<?php echo $t_bugnote_class ?>" rows="7"></textarea>
	</td>
</tr>

<tr>

<?php echo lang_get( 'bugnote' ) ?>

</th>

</td>

</tr>

修改为：

<tr>
				<th class="category" width="15%">
					<?php echo lang_get( 'bugnote' ) ?>
				</th>
				<td width="85%">
                <div id="editor—wrapper">
                    <div id="toolbar-container-bugnote-add"><!-- 工具栏 --></div>
                    <div id="editor-container-bugnote-add"><!-- 编辑器 --></div>
                </div>
					<textarea name="bugnote_text" id="bugnote_text" class="<?php echo $t_bugnote_class ?>" rows="7" style="display:none"></textarea>
				</td>
			</tr>

<tr>

<?php echo lang_get( 'bugnote' ) ?>

</th>

</div>

<textarea name="bugnote_text" id="bugnote_text" class="<?php echo $t_bugnote_class ?>" rows="7" style="display:none"></textarea>

</td>

</tr>

bugnote_edit_page.php找到如下代码：

<tr>
	<td colspan="2">
		<textarea class="form-control <?php echo $t_bugnote_class; ?>" cols="80" rows="10" name="bugnote_text"
		id="bugnote_text"><?php echo $t_bugnote_text ?></textarea>
	</td>
</tr>

<tr>

<textarea class="form-control <?php echo $t_bugnote_class; ?>" cols="80" rows="10" name="bugnote_text"

id="bugnote_text"><?php echo $t_bugnote_text ?></textarea>

</td>

</tr>

修改为：

<tr>
	<td colspan="2">
    <div id="editor—wrapper">
                    <div id="toolbar-container-bugnote-add"><!-- 工具栏 --></div>
                    <div id="editor-container-bugnote-add"><!-- 编辑器 --></div>
                </div>
		<textarea class="form-control <?php echo $t_bugnote_class; ?>" cols="80" rows="10" name="bugnote_text"
		id="bugnote_text" style="display:none;"><?php echo $t_bugnote_text ?></textarea>
	</td>
</tr>

<tr>

</div>

<textarea class="form-control <?php echo $t_bugnote_class; ?>" cols="80" rows="10" name="bugnote_text"

id="bugnote_text" style="display:none;"><?php echo $t_bugnote_text ?></textarea>

</td>

</tr>

bugnote_view_inc.php找到如下代码：

if( !is_blank( $t_activity['note']->note ) ) {
	echo string_display_links( $t_activity['note']->note );
	$t_add_space = true;
}

if( !is_blank( $t_activity['note']->note ) ) {

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

$t_add_space = true;

}

修改为：

if( !is_blank( $t_activity['note']->note ) ) {
	echo $t_activity['note']->note;
	$t_add_space = true;
}

if( !is_blank( $t_activity['note']->note ) ) {

echo $t_activity['note']->note;

$t_add_space = true;

}

这样就可以在提交问题、添加注释、修改注释等页面都使用富文本编辑器。

同时显示这些文本的区域都有加载对应的样式。

添加highlight.js支持

有了wangEditor 5，在编辑器中高亮代码是相当舒适了，不过也还是把显示页面也加上高亮支持，虽然两个的高亮样式不同，有总比没有强。

这里就使用highlight.js来渲染高亮。可以无缝跟wangEditor 5的代码块衔接。

还是将JS/CSS文件放入js/和css/目录当中，当然还是别忘了给CSS文件改个名。

修改html_api.php文件：

// 找到
html_javascript_link( 'common.js' );
// 在下方添加
echo "\t" . '<link rel="stylesheet" type="text/css" href="/css/highlight.css"></link>' . "\n";
html_javascript_link( 'highlightjs.js' );

// 找到

html_javascript_link( 'common.js' );

// 在下方添加

echo "\t" . '<link rel="stylesheet" type="text/css" href="/css/highlight.css"></link>' . "\n";

html_javascript_link( 'highlightjs.js' );

最后在we_init.js文件中，初始化一下就OK了，不生效的话就看一下文件的加载顺序。

hljs.highlightAll();

1	hljs.highlightAll();

转载保留版权：大D技研室 | 《MantisBT的配置与添加富文本编辑器wangEditor 5》
本文链接地址：https://www.dadclab.com/archives/7834.jiecao
转载须知：如果您需要转载本文，请将版权信息，版权授权方式，以及本文的链接地址注明，谢谢合作。

本文被贴上了：代码 , 前端 , 缺陷管理系统标签

← Python读写Excel库：xlwings从入门到放弃

大D技研室

简单易懂的现代魔法