phpcmsV9 完整更新ckeditor3.6.6编辑器到最新版ckeditor4.8.0

phpcmsV9 默认编辑器是ckeditor,但是版本低,使用效果低。 本文 重点解决问题: 更新ckeditor默认编辑器到最新版。 phpcms当前版本 : V9.6.3 更换编辑器到CKeditor 4.8.0的详细步骤 网上搜索整理并且尝试成功 注意 : 哪些文件需要修改?

应用介绍

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

本文 重点解决问题: 更新ckeditor默认编辑器到最新版。
phpcms当前版本 : V9.6.3

更换编辑器到CKeditor 4.8.0的详细步骤
网上搜索整理并且尝试成功

注意 : 哪些文件需要修改?
statics/js/ckeditor/config.js(保留源文件代码,会出现部分插件丢失,在原插件中复制过来即可)
phpcms/libs/classes/form.class.php (增加几行php代码)
statics/js/ckeditor/skins/moono-lisa/editor.css (增加几行css代码)

详细步骤:
将statics/js/ckeditor目录更名成ckeditor_bak (备份以便以后恢复);
下载CKEditor 4.8.0 Full的压缩包,
CKEditor 官方下载地址: 点击下载 · CKEditor 4.8.0 Full;
将zip压缩包中的ckeditor目录解压到statics/js目录下;
将第一步原编辑器目录ckeditor_bak中的config.js文件 复制并覆盖 到ckeditor目录中;
保留源文件下ckeditor/config.js文件代码

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

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    // Define changes to default configuration here. For example:
    // 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;    
};
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>');
}

修改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>';

复制以下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)}
完成修改

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

修改前后,效果图对比:

phpcmsV9 ckeditor3.6.6版本更新到ckeditor4.8.0的全部内容。

点赞(9) 打赏

立即下载

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部