升級phpcms的ckeditor編輯器

首先說明一下為什么升級？網上很多人升級成了ueditor，可從fckedotror 到 ckeditor，我個人都是比較喜歡的，特別是開放式的插件方式。另外一個就是至少要懂得升級和插件的開發，這樣也能給phpcms增色不少。

准備：

1.當前phpcms最新版本（自帶ckeditor 版本為3.6.6）

2.准備替換的最新ckeditor,版本4.2.1

 

一。開始之前說下原版ckeditor與phpcms的ckeditor的一些主要區別：

1.原版的分頁符是一個div標簽，而phpcms中編輯器的是[page]。

2.phpcms編輯器下方，多了3個按鈕，“分頁符”，“子標題”，“附件上傳”。

3.由於ckeditor的版本不一樣，一些自己開發的插件不能兼容。

二、下面開始替換。

1.備份phpcms的 /statics/js/ckeditor 文件夾（重命名即可）。以及/phpcms/libs/classes/form.class.php （這個文件中有個方法就是創建一個編輯器，使用一些編輯器的工具欄配置需要在這里操作）

2.把新版ckedtior復制到/statics/js/下。打開/statics/js/ckeditor/config.js 文件，用舊版的config.js替換。但請注釋掉 config.extraPlugins = ''; 這一行（我想應該是插件不兼容問題）

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    
    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 = '';
    config.enterMode = CKEDITOR.ENTER_BR; 
    config.shiftEnterMode = CKEDITOR.ENTER_P;
    config.font_names='宋體/宋體;黑體/黑體;仿宋/仿宋_GB2312;楷體/楷體_GB2312;隸書/隸書;幼圓/幼圓;微軟雅黑/微軟雅黑;'+ config.font_names;
};


CKEDITOR.on( 'instanceReady', function( ev ){ with (ev.editor.dataProcessor.writer) { setRules("p", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("h1", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("h2", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("h3", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("h4", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("h5", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("div", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("table", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("tr", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("td", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("iframe", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("li", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("ul", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); setRules("ol", {indent : false, breakAfterOpen : false, breakBeforeClose : false} ); } }); 
//CKEDITOR.plugins.load('pgrfilemanager');
function insert_page(editorid)
{
    var editor = CKEDITOR.instances[editorid];
    editor.insertHtml('[page]');
    if($('#paginationtype').val()) {
        $('#paginationtype').val(2);
        $('#paginationtype').css("color","red");
    }
}

function insert_page_title(editorid,insertdata)
{
    if(insertdata)
    {
        var editor = CKEDITOR.instances[editorid];
        var data = editor.getData();
        var page_title_value = $("#page_title_value").val();
        if(page_title_value=='')
        {
            $("#msg_page_title_value").html("<font color='red'>請輸入子標題</font>");
            return false;
        }
        page_title_value = '[page]'+page_title_value+'[/page]';
        editor.insertHtml(page_title_value);
        $("#page_title_value").val('');
        $("#msg_page_title_value").html('');
        if($('#paginationtype').val()) {
            $('#paginationtype').val(2);
            $('#paginationtype').css("color","red");
        }
    }
    else
    {
        $("#page_title_div").slideDown("fast");
    }
}
var objid = MM_objid = key = 0;
function file_list(fn,url,obj) {
    $('#MM_file_list_editor1').append('<div id="MM_file_list_'+fn+'">'+url+' <a href=\'#\' onMouseOver=\'javascript:FilePreview("'+url+'", 1);\' onMouseout=\'javascript:FilePreview("", 0);\'>查看</a> | <a href="javascript:insertHTMLToEditor(\'<img src='+url+'>\',\''+fn+'\')">插入</A> | <a href="javascript:del_file(\''+fn+'\',\''+url+'\','+fn+')">刪除</a><br>');
}

 

 

3.打開/statics/js/ckeditor/ckeditor.js 做一些修改，目的是 把工具欄上的分頁按鈕與phpcms的分頁保持一致。

找到：

CKEDITOR.plugins.pagebreakCmd={exec:function(a){var b=a.lang.pagebreak.alt,b=CKEDITOR.dom.element.createFromHtml('<div style="page-break-after: always;"contenteditable="false" title="'+b+'" aria-label="'+b+'" data-cke-display-name="pagebreak" class="cke_pagebreak"></div>',a.document);a.insertElement(b)},context:"div",allowedContent:{div:{styles:"!page-break-after"},span:{match:function(a){return(a=a.parent)&&"div"==a.name&&a.styles["page-break-after"]},styles:"display"}},requiredContent:"div{page-break-after}"};

 

 替換為：

CKEDITOR.plugins.pagebreakCmd={exec:function(a){a.insertHtml('[page]');o=document.getElementById('paginationtype');o.options[2].selected = true}};

 

 4.打開/phpcms/libs/classes/form.class.php 添加一些內容，目的是加上編輯器底部的三個按鈕。（phpcms之前是在 ckeditor.js中做的。）

在下面代碼后面

if(!defined('IMAGES_INIT')) {
            $ext_str .= '<script type="text/javascript" src="'.JS_PATH.'swfupload/swf2ckeditor.js"></script>';
            define('IMAGES_INIT', 1);
        }

 

添加：

        $ext_str.="<div class=\"cke_footer\">";
        if(!$disabled_page){
            $ext_str.="<a href=\"javascript:insert_page('content')\">分頁符</a><a href=\"javascript:insert_page_title('content')\">子標題</a>";
        }
        $ext_str.="<a onclick=\"flashupload('flashupload', '附件上傳','{$textareaid}','','{$allowuploadnum},{$alowuploadexts},{$allowbrowser}','{$module}','{$catid}','{$authkey}');;return false;\" href=\"javascript:void(0);\">附件上傳</a>
</div>";

 

 

5.復制舊版ckeditor/skins/kama/images/文件夾下的文件 到 新版ckeditor/skins/moono/images/下。目的是一些樣式的需要。

6.打開ckeditor\skins\moonoeditor_gecko.css文件，在最后加入三個按鈕的樣式即可

/*phpcms 新增編輯器底部按鈕樣式*/
.cke_top {
    background: url("images/line.png") repeat-x scroll 0 0 transparent;
}
.cke_footer {
    float: left;
    margin-top: 3px;
}
.cke_footer a,  .cke_footer a:hover,  .cke_footer a:visited,.cke_footer a:active {
    background: url("images/cke_fot.gif") repeat-x scroll left bottom transparent;
    border: 1px solid #E0E0E0;
    color: #666666;
    cursor: pointer;
    display: block;
    float: left;
    height: 19px;
    line-height: 19px;
    margin-right: 8px;
    padding: 0 10px;
}
.cke_footer a:hover {
    background-position: left top;
}


.editor_bottom {
    clear: both;
    height: 12px;
    top:-28px;
    position: relative;
}
#page_title_div {
    display: none;
    height: 78px;
    left: 18px;
    position: absolute;
    top: -120px;
    width: 295px;
    z-index: 99999;
}
#page_title_div table {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 2px solid #D5E0E6;
    height: 78px;
    width: 295px;
}
#page_title_div table td {
    border: medium none;
}
#page_title_div table td.title {
    color: #333333;
    font: 18px/31px "MicroSoft YaHei","SimHei";
    height: 26px;
    margin: 0;
    padding: 0 0 0 12px;
    text-align: left;
}
#page_title_div a.close span {
    display: none;
}
#page_title_div a.close {
    background: url("images/cross.png") no-repeat scroll left 3px transparent;
    display: block;
    float: right;
    height: 16px;
    margin-right: 10px;
    width: 16px;
}
#page_title_div a.close:hover {
    background-position: left -46px;
}
.content_attr {
    background: none repeat scroll 0 0 #FFFFCC;
    border: 1px solid #CCCCCC;
    margin-top: 6px;
    padding: 5px 8px;
}
#Capture {
    color: #474747;
    font-size: 12px;
    line-height: 20px;
}
#Capture font {
    color: #FF0000;
}
#Capture a {
    background: url("images/cdw.png") no-repeat scroll 0 0 transparent;
    color: #0075C0;
    display: inline-block;
    padding-left: 20px;
    text-decoration: none;
}
#Capture a:hover {
    text-decoration: underline;
}
#Capture #CaptureDown {
    background-image: url("images/cd.png");
}

 

到此，ckeditor編輯器升級完成，需要說明一下的是，phpcms本身自帶一個capture插件，本次升級沒有考慮它，一是用處不大，而是只能在ie中使用。

如有什么疑問或錯誤，請告知，謝謝！