phpcmsV9 完整更新ckeditor编辑器到最新版 - 源码篇

phpcmsV9 默认编辑器是ckeditor,但是版本低,使用效果低。

本文 重点解决问题: 更新ckeditor默认编辑器到最新版。
phpcms当前版本 : V9.6.3
.
现在将我更换编辑器到CKeditor 4.8的详细步骤方法分享一下
基本上都是从网上搜索整理并且自己尝试成功的


注意 : 哪些文件需要修改?

  • 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的压缩包,
    CKEditor 官方下载地址: 点击下载 · CKEditor 4.8.0 Full

  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. 完成修改。

    清空浏览器缓存,重新打开phpcmsV9后台,进入内容编辑器页面查看编辑器效果。



修改前后,效果图对比:

在这里插入图片描述

在这里插入图片描述


附:下载源码文件


以上就是关于“ phpcmsV9 完整更新ckeditor编辑器到最新版 - 源码篇 ” 的全部内容。

*文章参考:bbs.phpcms.cn

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值