akcms升級后臺編輯器完美教程

2013-1-6更新：增加代碼區所見即所得風格，以與正文區分開。效果：

被這個折騰兩天了，搞不定這個，連模板都沒心思搞了。。不過現在總算搞定。

首先，明白一些東西。

• akcms后臺的富文本編輯器采用的是xheditor，它的特點就是小，定制性強，最后更新為2012-7-28.
• akcms的xheidtor隨著版本升級也早就更新到了最新版，也即是xheditor1.1.14版。
• 插入代碼、google地圖按鈕屬于xheditor的插件，定制版是沒有的。
• akcms采用的xheditor是經過定制的，也就是說是閹割的。

要搞技術站，文章里必定有代碼，代碼區總得搞好看點，起碼有個代碼高亮什么的，因此義無反顧的走上了折騰后臺編輯器之路。

這里有個教程，也是在網上能找到的唯一的一個教程，這篇文章原理是正確的，但是照著他這去做，效果絕對出不來。

特別是一定不要用他附件里的文件覆蓋！因為一是akcms版本更新非常快，他那個的內核版本已經舊了，你去覆蓋會出嚴重錯誤；二是我發現我的akcms文件是ANSI編碼，而他的文件是unicode無BOM編碼，文件編碼不一致也會導致嚴重錯誤，還會導致插入的中文變成亂碼。

下面給出正確的教程，因為akcms每次升級之后都需要將這個過程重復一遍。

一、下載安裝akcms最新版本，這里假定你的akcms已經高于4.2版；

二、打開"后臺/templates/admincp_moduleitem.htm"，找到

<{include file="admincp_header.htm"}> 

在后面加入以下代碼（這里將原教程中的中文改為英文，避免亂碼，并且因為精簡了上傳內容，因此改掉相關路徑）：

<style type="text/css"> 
.btnMap { width:50px !important; transparent url(<{$home}>/prettify/googlemap/map.gif) no-repeat center center; } 
.btnCode { transparent url(<{$home}>/prettify/code.gif) no-repeat 16px 16px; background-position:2px 2px; } 
</style> 
<script type="text/javascript"> 
var editor; 
var plugins = { 
    Code: { 
        c: 'btnCode', 
        t: 'Insert Code', 
        h: 1, 
        e: function() { 
            var _this = this; 
            var htmlCode = '<div><select id="xheCodeType"><option value="html">HTML/XML</option><option value="js">Javascript</option><option value="css">CSS</option><option value="php">PHP</option><option value="java">Java</option><option value="py">Python</option><option value="pl">Perl</option><option value="rb">Ruby</option><option value="cs">C#</option><option value="c">C++/C</option><option value="vb">VB/ASP</option><option value="">other</option></select></div><div><textarea id="xheCodeValue" wrap="soft" spellcheck="false" style="width:300px;height:100px;" /></div><div style="text-align:right;"><input type="button" id="xheSave" value="GO" /></div>'; 
            var jCode = $(htmlCode), 
            jType = $('#xheCodeType', jCode), 
            jValue = $('#xheCodeValue', jCode), 
            jSave = $('#xheSave', jCode); 
            jSave.click(function() { 
                _this.loadBookmark(); 
                _this.pasteHTML('<pre class="prettyprint lang-' + jType.val() + '">' + _this.domEncode(jValue.val()) + '</pre>'); 
                _this.hidePanel(); 
                return false; 
            }); 
            _this.saveBookmark(); 
            _this.showDialog(jCode); 
        } 
    }, 
 
    map: { 
        c: 'btnMap', 
        t: 'Insert GoogleMaps', 
        e: function() { 
            var _this = this; 
            _this.saveBookmark(); 
            _this.showIframeModal('GoogleMaps', '<{$home}>/prettify/googlemap/googlemap.html', 
            function(v) { 
                _this.loadBookmark(); 
                _this.pasteHTML('<img src="' + v + '" />'); 
            }, 
            538, 404); 
        } 
    } 
}; 
</script> 
<script language="javascript"> 
function confirmdelete() { 
    if (!confirm('<{$lan.suredelitem}>')) { 
        return false; 
    } else { 
        document.location = "index.php?file=admincp&action=deleteitem&id=<{$id}>&returnlist=1"; 
    } 
} 
function checksubmit() { 
    if ($('#title').val() == "") { 
        alert("<{$lan.notitle}>"); 
        $('#title').focus(); 
        return false; 
    } 
    if ($('#category').val() == "" || $('#category').val() == 0) { 
        alert("<{$lan.nocategory}>"); 
        $('#category0').focus(); 
        return false; 
    } 
    $('#s').attr("disabled", true); 
} 
function selectcategory(l, c) { 
    if (c == 0) { 
        if (l > 1) $("#category").val($("#category" + (l - 2)).val()); 
    } else { 
        $("#category").val(c); 
    } 
    for (i = l; i < 10; i++) { 
        $("#category" + i).get(0).options.length = 0; 
    } 
    $("#category" + l).prepend("<option value='0'><{$lan.pleasechoose}></option>"); 
    if (c > 0 || l == 0) { 
        var fileref = document.createElement("script"); 
        fileref.setAttribute("type", "text/javascript"); 
        fileref.setAttribute("src", "index.php?file=admincp&action=selectcategories&up=" + c + "&level=" + l + "&module=<{$moduleid}>&defaultlist=<{$categorylist}>"); 
        document.body.appendChild(fileref); 
    } 
} 
function SetframeHeight(obj) { 
    var iframeid = document.getElementById(obj); 
    if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) { 
        iframeidiframeid.height = iframeid.contentDocument.body.offsetHeight; 
    } else { 
        iframeidiframeid.height = iframeid.Document.body.scrollHeight; 
    } 
} 
</script> 

打開"后臺/include/admin.func.php"搜索：

tools:'Source,Pastetext,|,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,SelectAll,Removeformat,|,Align,List,Outdent,Indent,|,Link,Unlink,Anchor,Img,Hr,Table',loadCSS:'<style>body{font-size:14px;} 

一共三處，替換成：

plugins:plugins,loadCSS:'<style>body{font-size:14px;}pre{margin-left:2em;border-left:3px solid #00a650;padding:0 1em;font-size:12px;}

同樣是因為亂碼問題，所以原教程中插入的表情文字都變成亂碼，也顯示不出來。

這個是顯示xheditor的插件模式，注意：直接在tools后面添加插件Code, Map不會顯示出來，不過Flash和Media是原本就有的，可以顯示。如果只要插入媒體的話，也可以將上面那句替換為：

tools:'Source,Pastetext,|,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,SelectAll,Removeformat,|,Align,List,Outdent,Indent,|,Link,Unlink,Anchor,Flash,Media,Img,Hr,Table',loadCSS:'<style>body{font-size:14px;} 

三、上傳附件根目錄下的prettify文件夾到你的網站根目錄。

四、在你的文章正文模板中<head>和</head>之間插入調用（只需要在會出現代碼的頁面插入）：

<link href="<{$home}>/prettify/prettify.css" type=text/css rel=stylesheet /> 
<script type="text/javascript" src="<{$home}>/prettify/prettify.js"></script> 

并且，在文章正文后方插入代碼以使JS生效：

<script type="text/javascript">prettyPrint();</script> 

prettify.css可以自己設置，以使代碼區風格和整站協調。

大概就這個樣子了，prettify代碼高亮是xheditor官方的插件，相關的代碼可以在其提供的demo中找到。

目前還有一個不太滿意的地方：

代碼區不能顯示行數，這會給討論帶來一定的不便，不過也沒找到其他好的兼容xheditor的代碼高亮插件了，這個等將來有機會再折騰。

后臺編輯器的所見即所得，不能即時的顯示代碼區風格，我看了一下想修改后臺，結果akcms后臺竟然用了iframe！而且texteara區域被雙引號包括了起來，外部的風格是如論如何都進不去的，這個只能等后續修改xheditor的風格了，如果成功了也會更新到這個帖子。