akcms升级后台编辑器完美教程

2024-12-13 技术教程

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"，找到

<{includefile="admincp_header.htm"}>

在后面加入以下代码（这里将原教程中的中文改为英文，避免乱码，并且因为精简了上传内容，因此改掉相关路径）：

<styletype="text/css">.btnMap{width:50px!important;transparenturl(<{$home}>/prettify/googlemap/map.gif)no-repeatcentercenter;}.btnCode{transparenturl(<{$home}>/prettify/code.gif)no-repeat16px16px;background-position:2px2px;}</style><scripttype="text/javascript">vareditor;varplugins={Code:{c:'btnCode',t:'InsertCode',h:1,e:function(){var_this=this;varhtmlCode='<div><selectid="xheCodeType"><optionvalue="html">HTML/XML</option><optionvalue="js">Javascript</option><optionvalue="css">CSS</option><optionvalue="php">PHP</option><optionvalue="java">Java</option><optionvalue="py">Python</option><optionvalue="pl">Perl</option><optionvalue="rb">Ruby</option><optionvalue="cs">C#</option><optionvalue="c">C++/C</option><optionvalue="vb">VB/ASP</option><optionvalue="">other</option></select></div><div><textareaid="xheCodeValue"wrap="soft"spellcheck="false"style="width:300px;height:100px;"/></div><divstyle="text-align:right;"><inputtype="button"id="xheSave"value="GO"/></div>';varjCode=$(htmlCode),jType=$('#xheCodeType',jCode),jValue=$('#xheCodeValue',jCode),jSave=$('#xheSave',jCode);jSave.click(function(){_this.loadBookmark();_this.pasteHTML('<preclass="prettyprintlang-'+jType.val()+'">'+_this.domEncode(jValue.val())+'</pre>');_this.hidePanel();returnfalse;});_this.saveBookmark();_this.showDialog(jCode);}},map:{c:'btnMap',t:'InsertGoogleMaps',e:function(){var_this=this;_this.saveBookmark();_this.showIframeModal('GoogleMaps','<{$home}>/prettify/googlemap/googlemap.html',function(v){_this.loadBookmark();_this.pasteHTML('<imgsrc="'+v+'"/>');},538,404);}}};</script><scriptlanguage="javascript">functionconfirmdelete(){if(!confirm('<{$lan.suredelitem}>')){returnfalse;}else{document.location="index.php?file=admincp&action=deleteitem&id=<{$id}>&returnlist=1";}}functionchecksubmit(){if($('#title').val()==""){alert("<{$lan.notitle}>");$('#title').focus();returnfalse;}if($('#category').val()==""||$('#category').val()==0){alert("<{$lan.nocategory}>");$('#category0').focus();returnfalse;}$('#s').attr("disabled",true);}functionselectcategory(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("<optionvalue='0'><{$lan.pleasechoose}></option>");if(c>0||l==0){varfileref=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);}}functionSetframeHeight(obj){variframeid=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>之间插入调用（只需要在会出现代码的页面插入）：

<linkhref="<{$home}>/prettify/prettify.css"type=text/cssrel=stylesheet/><scripttype="text/javascript"src="<{$home}>/prettify/prettify.js"></script>

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

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

prettify.css可以自己设置，以使代码区风格和整站协调。

大概就这个样子了，prettify代码高亮是xheditor官方的插件，相关的代码可以在其提供的demo中找到。

目前还有一个不太满意的地方：

代码区不能显示行数，这会给讨论带来一定的不便，不过也没找到其他好的兼容xheditor的代码高亮插件了，这个等将来有机会再折腾。

后台编辑器的所见即所得，不能即时的显示代码区风格，我看了一下想修改后台，结果akcms后台竟然用了iframe！而且texteara区域被双引号包括了起来，外部的风格是如论如何都进不去的，这个只能等后续修改xheditor的风格了，如果成功了也会更新到这个帖子。

附件：http://down.51cto.com/data/2362113