akcms采用的xheditor是经过定制的，也就是说是阉割的。
下面给出正确的教程，因为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;}
1.
三、上传附件根目录下的prettify文件夹到你的网站根目录。
四、在你的文章正文模板中<head>和</head>之间插入调用（只需要在会出现代码的页面插入）：
<link href="<{$home}>/prettify/prettify.css" type=text/css rel=stylesheet />
<script type="text/javascript" src="<{$home}>/prettify/prettify.js"></script>
1.
2.
并且，在文章正文后方插入代码以使JS生效：
<script type="text/javascript">prettyPrint();</script>
1.
prettify.css可以自己设置，以使代码区风格和整站协调。
大概就这个样子了，prettify代码高亮是xheditor官方的插件，相关的代码可以在其提供的demo中找到。
-----------------------------------
©著作权归作者所有：来自51CTO博客作者pockry的原创作品，请联系作者获取转载授权，否则将追究法律责任
akcms升级后台编辑器完美教程
https://blog.51cto.com/pockry/1108035
原文链接： akcms升级后台编辑器