Mantis 預設的編輯器 (輸入 Issue 描述, 增加 Note, ...) 是陽春的編輯器, 無法像 Word 一樣可以設定複雜的文字格式或立刻顯示文字的格式. 這可能有幾種因素:

1. 加了格式後, Search 可能會搜尋不到: 例如 Issue 裡面是 <b>Tes<i>t</i></b>, 若我們搜尋 Test 則找不到結果
2. Security: 功能越多, 漏洞越多
3. 作者認為不必要: 只不過是用來紀錄 Issue, 又不是拿來筆戰打嘴砲用
4. 其他: 例如這又不是 Commerical 軟體, 幹嘛給你這麼神?

Anyway, 總是會有背景很硬的 User 會要用求能 "類似" Word 的方式來編輯 Issue. 好吧, 來試試看吧. 以下簡單說明兩個比較知名的 WYSIWYG (CKEditor, TinyMCE) 的安裝與設定

設定 Mantis 的文字過濾功能

# 否則 WYSIWYG 做出來的格式可能會跑掉, 像下圖
# 不過! 關掉文字過濾可能會造成 Security 問題 (像是 Cross Site Scripting 攻擊), 因此要嚴格控管使用系統的人員
# 因此被駭了不要找筆者算帳啊~ (先推卸責任一下)

Mantis Text Filtered

Manage --> Manage Plugins --> MantisBT Formatting 1.0b

Mantis Manage Plugin 2  

 把 "Text Processing" 改為 "Off" 後按 "Update Configuration"

Mantis Turn Off Text Processing  

設定 WYSIWYG

CKEditor

PS: 用 IE 瀏覽器用 CKEditor 時, User 可以 Copy/Paste 圖檔變成 Embeded HTML, 但是那個 Size 會變得非常肥胖, 而且 Mantis 整個會變得很慢, 甚至顯示不正常

1. 下載 CKEditor

#從 CKEditor 官網下載最新的 CKEditor (以4.4.7 Standard 為範例)
cd ~
wget http://download.cksource.com/CKEditor/CKEditor/CKEditor%204.4.7/ckeditor_4.4.7_standard.zip
unzip ckeditor_4.4.7_standard.zip
mv ckeditor /var/www/html
cd /var/www/html
chown -R apache.apache ckeditor
chcon -R --reference=mantis ckeditor # 怕 SELinux 搗亂

 

2. 把客製侷限在 /var/www/html/mantis/custom

# 這是怕升級時不小心就把心血結晶蓋掉 (灰常有可能, 經常的發生)
# 這樣規劃, 以後要升級時, 只需要備份以下檔案/目錄
# 1. /var/www/html/mantis/config_inc.php
# 2. /var/www/html/mantis/custom_*.php
# 3. /var/www/html/mantis/custom
mkdir /var/www/html/mantis/custom
cd /var/www/html/mantis
cp meta_inc.php custom
chown -R apache.apache custom
chcon -R --reference=config_inc.php custom

 

3. 修改 config_inc.php

# 原本系統預設會引用 /var/www/html/mantis/meta_inc.php
# 現在改參考我們新的 /var/www/html/mantis/custom/meta_inc.php
# 請在 config_inc.php 加入以下敘述

$g_meta_include_file = '%absolute_path%custom/meta_inc.php';

 

4. 修改 custom/meta_inc.php

# 修改新的 meta_inc.php 以引用 CKEditor
# 請在 /var/www/html/mantis/custom/meta_inc.php 後面加上以下敘述
# 以下方式二選一


# 方法一: 用 Tag 的 Class = ckeditor 來自動套用
#

<script>

function loadjscssfile(filename, filetype) {
    if (filetype=="js") {
        var fileref=document.createElement('script');
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src", filename);
    } else if (filetype=="css") {
        var fileref=document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref);
}

function setTextAreaEditor() {
    var elem = document.getElementsByTagName('textarea');
    var count = elem.length;
    for (var i=0; i<count; i++) {
        var el = elem[i];
        el.className = 'ckeditor'; // 設定 TextArea 的 Class 為 ckeditor, 這樣會自動套用
    }
    loadjscssfile('/ckeditor/ckeditor.js', 'js'); // 此時才引入 ckeditor.js, 套用 class = ckeditor 的 Tag
}

window.addEventListener('load', setTextAreaEditor, false); // 在 Web Page 載入結束後才開始設定

</script>

#
# 方法二: 用 CKEDITOR.replace(id)

<script src="/ckeditor/ckeditor.js"></script>
<script>

function setTextAreaEditor() {
    var elem = document.getElementsByTagName('textarea');
    var count = elem.length;
    for (var i=0; i<count; i++) {
        var el = elem[i];
        var newId = el.id; // 取 Tag 的 Id
        if ((newId==null)||(newId=='')) {
            // 若 Tag 沒有 Id (Mantis 就是這樣), 則給予一個 Id
            newId = 'ckeditor_'+count;
            el.id = newId;
        }
    CKEDITOR.replace(newId);
}

window.addEventListener('load', setTextAreaEditor, false); // 在 Web Page 載入結束後才開始設定

</script>

 

5. Ok, 測試收工

Mantis CKEditor  


TinyMCE

PS: 有沒有跟 CKEditor 一樣的問題, 我沒測試過, 不過我猜結果會一樣

1. 下載 TinyMCE

#從 TinyMCE 官網下載最新的 TinyMCE (以1.4.9為範例)
cd ~
wget http://download.moxiecode.com/tinymce/tinymce_4.1.9.zip
unzip tinymce_4.1.9.zip
mv tinymce /var/www/html
cd /var/www/html
chown -R apache.apache tinymce
chcon -R --reference=mantis tinymce # 怕 SELinux 搗亂

 

2. 把客製侷限在 /var/www/html/mantis/custom (跟CKEditor一樣)

# 這是怕升級時不小心就把心血結晶蓋掉 (灰常有可能, 經常的發生)
# 這樣規劃, 以後要升級時, 只需要備份以下檔案/目錄
# 1. /var/www/html/mantis/config_inc.php
# 2. /var/www/html/mantis/custom_*.php
# 3. /var/www/html/mantis/custom
mkdir /var/www/html/mantis/custom
cd /var/www/html/mantis
cp meta_inc.php custom
chown -R apache.apache custom
chcon -R --reference=config_inc.php custom

 

3. 修改 config_inc.php (跟CKEditor一樣)

# 原本系統預設會引用 /var/www/html/mantis/meta_inc.php
# 現在改參考我們新的 /var/www/html/mantis/custom/meta_inc.php
# 請在 config_inc.php 加入以下敘述

$g_meta_include_file = '%absolute_path%custom/meta_inc.php';

 

4. 修改 custom/meta_inc.php

# 修改新的 meta_inc.php 以引用 TinyMCE
# 請在 /var/www/html/mantis/custom/meta_inc.php 後面加上以下敘述


<script type="text/javascript" src="/tinymce/js/tinymce/tinymce.min.js"></script>

<script>
tinymce.init({
    selector: "textarea",
    theme: "modern",
    width: 600,
    height: 300,
    plugins: [
        "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
        "save table contextmenu directionality emoticons template paste textcolor"
    ],
    content_css: "css/content.css",
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons",
    style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ]
});

</script>

5. Ok, 測試收工

Mantis TinyMCE  

創作者介紹

Egg Chang 的部落格

Egg Chang 發表在 痞客邦 PIXNET 留言(0) 人氣()