phpcmsV9.6自带的CKeditor编辑器版本比较老,表格显示都不友好。今天来说说给phpcmsV9.6的CKeditor编辑器升级最新版和增加拖拽上传和截图粘贴上传的具体方法。
首先第一步我们先升级编辑器,具体步骤如下;
1. 先把你的phpcms里的statics/js/ckeditor目录备份一下,防止改坏了;
2. 然后下载CKEditor 4.8.0 Full的压缩包,CKEditor 官方下载地址: 点击下载 · CKEditor 4.8.0 Full;
3. 然后把下载的安装包解压得到的ckeditor文件夹放到statics/js目录下;
4. 把第一步备份的ckeditor目录里的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;
接下来我们进入第二步,修改相关的文件;
修改phpcms/libs/classes/form.class.php,找到如下位置代码,并增加以下代码:
$str .= "});\r\n"; $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>'; //本次新增加的代码 $ext_str = "<div class='editor_bottom'>";
2. 复制下面的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)}
最后清空下缓存就可以看到最终效果了。
如果内容有帮助,就点个赞吧!