温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-07-21 19:08:51 来源:网络 阅读:1388 作者:pockry 栏目:web开发

2013-1-6更新:增加代码区所见即所得风格,以与正文区分开。效果:

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


被这个折腾两天了,搞不定这个,连模板都没心思搞了。。不过现在总算搞定。

 

首先,明白一些东西。

  • 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",找到

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

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

  1. <style type="text/css"> 
  2. .btnMap { width:50px !important; transparent url(<{$home}>/prettify/googlemap/map.gif) no-repeat center center; } 
  3. .btnCode { transparent url(<{$home}>/prettify/code.gif) no-repeat 16px 16px; background-position:2px 2px; } 
  4. </style> 
  5. <script type="text/javascript"> 
  6. var editor; 
  7. var plugins = { 
  8.     Code: { 
  9.         c: 'btnCode', 
  10.         t: 'Insert Code', 
  11.         h: 1, 
  12.         e: function() { 
  13.             var _this = this; 
  14.             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>'
  15.             var jCode = $(htmlCode), 
  16.             jType = $('#xheCodeType', jCode), 
  17.             jValue = $('#xheCodeValue', jCode), 
  18.             jSave = $('#xheSave', jCode); 
  19.             jSave.click(function() { 
  20.                 _this.loadBookmark(); 
  21.                 _this.pasteHTML('<pre class="prettyprint lang-' + jType.val() + '">' + _this.domEncode(jValue.val()) + '</pre>'); 
  22.                 _this.hidePanel(); 
  23.                 return false; 
  24.             }); 
  25.             _this.saveBookmark(); 
  26.             _this.showDialog(jCode); 
  27.         } 
  28.     }, 
  29.  
  30.     map: { 
  31.         c: 'btnMap', 
  32.         t: 'Insert GoogleMaps', 
  33.         e: function() { 
  34.             var _this = this; 
  35.             _this.saveBookmark(); 
  36.             _this.showIframeModal('GoogleMaps', '<{$home}>/prettify/googlemap/googlemap.html', 
  37.             function(v) { 
  38.                 _this.loadBookmark(); 
  39.                 _this.pasteHTML('<img src="' + v + '" />'); 
  40.             }, 
  41.             538, 404); 
  42.         } 
  43.     } 
  44. }; 
  45. </script> 
  46. <script language="javascript"> 
  47. function confirmdelete() { 
  48.     if (!confirm('<{$lan.suredelitem}>')) { 
  49.         return false; 
  50.     } else { 
  51.         document.location = "index.php?file=admincp&action=deleteitem&id=<{$id}>&returnlist=1"
  52.     } 
  53. function checksubmit() { 
  54.     if ($('#title').val() == "") { 
  55.         alert("<{$lan.notitle}>"); 
  56.         $('#title').focus(); 
  57.         return false; 
  58.     } 
  59.     if ($('#category').val() == "" || $('#category').val() == 0) { 
  60.         alert("<{$lan.nocategory}>"); 
  61.         $('#category0').focus(); 
  62.         return false; 
  63.     } 
  64.     $('#s').attr("disabled", true); 
  65. function selectcategory(l, c) { 
  66.     if (c == 0) { 
  67.         if (l > 1) $("#category").val($("#category" + (l - 2)).val()); 
  68.     } else { 
  69.         $("#category").val(c); 
  70.     } 
  71.     for (i = l; i < 10; i++) { 
  72.         $("#category" + i).get(0).options.length = 0
  73.     } 
  74.     $("#category" + l).prepend("<option value='0'><{$lan.pleasechoose}></option>"); 
  75.     if (c > 0 || l == 0) { 
  76.         var fileref = document.createElement("script"); 
  77.         fileref.setAttribute("type", "text/javascript"); 
  78.         fileref.setAttribute("src", "index.php?file=admincp&action=selectcategories&up=" + c + "&level=" + l + "&module=<{$moduleid}>&defaultlist=<{$categorylist}>"); 
  79.         document.body.appendChild(fileref); 
  80.     } 
  81. function SetframeHeight(obj) { 
  82.     var iframeid = document.getElementById(obj); 
  83.     if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) { 
  84.         iframeidiframeid.height = iframeid.contentDocument.body.offsetHeight; 
  85.     } else { 
  86.         iframeidiframeid.height = iframeid.Document.body.scrollHeight; 
  87.     } 
  88. </script> 

打开"后台/include/admin.func.php"搜索:

  1. 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;}

一共三处,替换成:

  1. 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是原本就有的,可以显示。如果只要插入媒体的话,也可以将上面那句替换为:

  1. 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>之间插入调用(只需要在会出现代码的页面插入):

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

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

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

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

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

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

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

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

附件:http://down.51cto.com/data/2362113
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI