phpcmsV9升级ckeditor编辑器最新版 界面简洁漂亮

使用PHPCMS建站用的还是旧版的ckeditor编辑器,有些功能已经落后了,比方说不能使用ctrl+B在线直接加粗文字等,今天齐鲁建站小编就来介绍下phpcmsV9更新ckeditor编辑器到最新版的方法。一起看看吧。

先来看效果图。

旧版:

phpcms,ckeditor最新版

新版:

phpcms,ckeditor最新版

下面来说说phpcmsV9更新ckeditor编辑器到最新版的方法。

要修改三个文件。

statics/js/ckeditor/config.js (先替换,后修改)(主要就是注释掉部分php代码)

phpcms/libs/classes/form.class.php (增加几行php代码)

statics/js/ckeditor/skins/moono-lisa/editor.css (增加几行css代码)

下面一一讲解。详细步骤:

1.将statics/js/ckeditor目录更名成ckeditor_bak (备份以便以后恢复);

2.下载CKEditor 4.8.0 Full的压缩包,下载地址:

链接:https://pan.baidu.com/s/1TK1_4Xq1UHVsxM5uJnVmxA提取码:0l5g

3. 将zip压缩包中的ckeditor目录解压到statics/js目录下;

4.将第一步原编辑器目录ckeditor_bak中的config.js文件 复制并覆盖 到ckeditor目录中;

5.接着修改覆盖后的ckeditor/config.js ,注释掉以下几行代码

// config.language = 'fr'; 注释此行
config.uiColor = '#f7f5f4';
config.width = '';
//config.removePlugins = 'elementspath,scayt'; 注释此行
//config.disableNativeSpellChecker = false; 注释此行
//config.resize_dir = 'vertical'; 注释此行
config.keystrokes =[[ CKEDITOR.CTRL + 13 /*Enter*/, 'maximize' ]];
//config.extraPlugins = 'capture,videoforpc,flashplayer'; 注释此行
//config.enterMode = CKEDITOR.ENTER_BR; 注释此行
//config.shiftEnterMode = CKEDITOR.ENTER_P; 注释此行
config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;

6.修改phpcms/libs/classes/form.class.php,找到如下代码,大约第70行左右 $str .= '</script>'; 在此行后增加以下代码:

$str .= '<div class="cke_footer">';
if($show_page == 'true') $str .= '<a href=\'javascript:insert_page("'.$textareaid.'")\'>分页符</a><a href=\'javascript:insert_page_title("'.$textareaid.'")\'>子标题</a>';
if($allowupload) $str .= '<a href="javascript:void(0);" onclick="flashupload(\'flashupload\', \'附件上传\',\''.$textareaid.'\',\'\',\''.$allowuploadnum.','.$alowuploadexts.','.$allowbrowser.'\',\''.$module.'\',\''.$catid.'\',\''.$authkey.'\');return false;">附件上传</a>';
$str .= '</div>';

7.复制以下CSS代码到 statics/js/ckeditor/skins/moono-lisa/editor.css文件的最后面:

.cke_footer{ float:left; margin-top:3px}
.cke_footer a,.cke_footer a:hover, .cke_footer a:visited, .cke_footer a:active{display:block; float:left;border:1px solid #e0e0e0; margin-right:8px;height:19px;line-height:19px;padding:0 10px;color:#666;cursor: hand;!important;cursor: pointer}
.cke_footer a:hover{background-position: left top}
.editor_bottom{ position:relative; height:1px; clear:both}
#page_title_div{width:295px; height:78px;position:absolute;display:none; z-index:99999; top:-120px; left:18px}
#page_title_div table{border:2px solid #d5e0e6; background:#fff;width:295px; height:78px;}
#page_title_div table td{ border:none}#page_title_div table td.title{text-align:left;height:26px;*height:25px;font:18px/31px "MicroSoft YaHei","SimHei";color:#333;*line-height:25px; margin:0; padding:0 0 0 12px}
#page_title_div a.close span{ display:none}
#page_title_div a.close{background: url(images/cross.png) no-repeat left 3px; display:block; float:right; margin-right:10px; width:16px; height:16px;}
#page_title_div a.close:hover{background-position: left -46px}
.content_attr{ border:1px solid #CCC; padding:5px 8px; background:#FFC; margin-top:6px}
#Capture{color:#474747; font-size:12px; line-height:20px}
#Capture font{color:red}
#Capture a{color:#0075c0;display:inline-block;zoom:1;*display:inline; background:url(images/cdw.png) no-repeat; padding-left:20px; text-decoration:none}
#Capture a:hover{text-decoration: underline}
#Capture #CaptureDown {background-image:url(images/cd.png)}

8.完成修改,ctrl+F5强刷页面,或者清空浏览器缓存,重新打开phpcmsV9后台,进入内容编辑器页面查看编辑器效果。

极客网企业会员

免责声明:本网站内容主要来自原创、合作伙伴供稿和第三方自媒体作者投稿,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证有关资料的准确性及可靠性,读者在使用前请进一步核实,并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。任何单位或个人认为本网站中的网页或链接内容可能涉嫌侵犯其知识产权或存在不实内容时,应及时向本网站提出书面权利通知或不实情况说明,并提供身份证明、权属证明及详细侵权或不实情况证明。本网站在收到上述法律文件后,将会依法尽快联系相关文章源头核实,沟通删除相关内容或断开相关链接。