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的风格了,如果成功了也会更新到这个帖子。
转载于:https://blog.51cto.com/pockry/1108035
akcms升级后台编辑器完美教程相关推荐
- dedephp geteditor(,cms教程:dedecms修改后台编辑器参数GetEditor的方法
dedecms修改后台编辑器参数GetEditor dedecms通过include/helpers/util.helper.php function GetEditor($fname, $fvalu ...
- OllyDBG完美教程(超强入门级)
OllyDBG 视频教程:https://www.bilibili.com/video/av6889190 动态调试工具之OllyDbg(OD)教程:https://www.bilibili.com/ ...
- Typora ——一款Markdown编辑器入门教程
Typora --Markdown编辑器入门教程 附上目录: 文章目录 Typora --Markdown编辑器入门教程 一. 序 二.前言 那么,什么是富文本格式?什么是Markdown? **Ma ...
- PHP百度编辑器使用方法,百度UEditor编辑器使用教程与使用方法
标签: 我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟 ...
- 详解CSDN-markdown编辑器使用教程(首次使用CSDN-markdown)
详解CSDN-markdown编辑器使用教程(首次使用CSDN-markdown) 原创:丶无殇 时间:2019-9-19 *仅基于原文教程加以注释* *注释以代码片方式(红字)* 字体颜色和大 ...
- 动易html在线编辑器 漏洞,动易系统解决IE8网站后台编辑器无效问题
微软的IE8正式版已于2009年3月20日正式发布了,也有不少的动易用户升级了自己的浏览器,但在升级后都发现动易的后台编辑器无法使用了,症状就是点击任何功能图标都没有弹出设置窗口,经过搜索了一下,终于 ...
- eclipse 2020-06版 安装配置完美教程(最后一版支持jdk1.8)
eclipse 2020版 安装配置完美教程 声明:此博客为本人原创,但是由于发布第一版时,就已经被其他平台抄袭,导致原创文章在第二次修订的时候被视为抄袭他人作品,并被百度等搜索引擎屏蔽,所以特地 ...
- wordpress怎么修改html,WordPress后台编辑器HTML模式界面中添加修改删除按钮
在WordPress编辑器HTML模式界面中添加 按钮一文中,我大致介绍了怎么在后台添加一些自定义的按钮,本文则更为详细全面的对wordpress后台编辑器HTML模式下的按钮自定义进行详解,以让开发 ...
- dede5.7 GBK 在php5.4环境下 后台编辑器无法显示文章内容
问题的原因是:是htmlspecialchars,PHP 5.4后GBK编码下默认不支持中文,转换后内容为空,UTF-8编码没有任何问题. 解决方法如下: 在\include\ckeditor\c ...
最新文章
- python实现洗牌算法_为什么渔民耶茨最有用的洗牌算法?
- Python使用matplotlib或者Seaborn箱图(boxplot)可视化时汉语(中文)标签显示成了框框□□、什么情况、我们有解决方案。
- 聊一聊多源最短路径问题(只有5行代码哦)
- string操作小汇总
- Linux 常见命令之Find \; +结合其它命令使用案例详解
- 词语搜索算法思想 - 第五步 结构实现
- 插件translator_Zotero Jasminum 插件的更新记录
- 信息学奥赛一本通 1307:【例1.3】高精度乘法 | 1174:大整数乘法 | OpenJudge NOI 1.13 09:大整数乘法
- ImportError: cannot import name '_ellipsoid'
- PAT (Basic Level) Practise (中文)- 1002. 写出这个数 (20)
- java并发编程实战电子书,王者笔记!
- 什么是偏振光和UV光?
- ylinux系统找到软件_你的 linux 上都有什么值得推荐的软件?
- Exsel 设置固定表头
- 带疑问的歌词有哪些_带有(我)字的歌词有哪些
- 北京市社会保险办理流程
- 操作系统——文件管理
- java手机小程序 情人节_情人节快到了!表白小程序制作详解,撩翻你的女神!...
- 基于Windows api手柄映射编程
- 宝利通group终端升级指导书
热门文章
- 二类形容词(形容动词)的用法
- waves服务器系统,Waves Audio 宣布 SoundGrid Studio System 软件系统
- ChatGPT 类 AI 软件供应链的安全及合规风险
- 在linux下,如何使得某个目录的下的可执行文件,成为系统级的可执行文件
- 安卓微信调用外部浏览器
- windows重建图标缓存(解决快捷方式图标丢失,图标加载时间长问题)
- 广播和多播,IGMP协议
- 【数据分析day05】Scipy读/写.mat文件,wav,mp3
- win10 批处理 使用浏览器打开多个网址
- Swing-学生管理系统之主页设计