pockry

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 = 'HTML/XMLJavascriptCSSPHPJavaPythonPerlRubyC#C++/CVB/ASPother

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>

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:'