phpcms中的ckeditor编辑器升级方法

稷森發表於 2023-7-9 00:00:00

准备：

1.当前phpcms最新版本（自带ckeditor 版本为3.6.6）

2.准备替换的最新ckeditor,版本4.2.1



一、开始之前说下原版ckeditor与phpcms的ckeditor的一些主要区别：

1.原版的分页符是一个div标签，而phpcms中编辑器的是。

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 = ''; 这一行（我想应该是插件不兼容问题）


<div>


代码如下:
</div>
<div id="phpcode10">
 
/** 
* @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; 
editor.insertHtml(''); 
if($('#paginationtype').val()) { 
$('#paginationtype').val(2); 
$('#paginationtype').css("color","red"); 
} 
} function insert_page_title(editorid,insertdata) 
{ 
if(insertdata) 
{ 
var editor = CKEDITOR.instances; 
var data = editor.getData(); 
var page_title_value = $("#page_title_value").val(); 
if(page_title_value=='') 
{ 
$("#msg_page_title_value").html("请输入子标题"); 
return false; 
} 
page_title_value = ''+page_title_value+''; 
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> 
'); 
}</div>



3.打开/statics/js/ckeditor/ckeditor.js 做一些修改，目的是把工具栏上的分页按钮与phpcms的分页保持一致。

找到：


<div>


代码如下:
</div>
<div id="phpcode11">
 
CKEDITOR.plugins.pagebreakCmd={exec:function(a){var b=a.lang.pagebreak.alt,b=CKEDITOR.dom.element.createFromHtml('<divcontenteditable="false">


代码如下:
</div>
<div id="phpcode12">
 
CKEDITOR.plugins.pagebreakCmd={exec:function(a){a.insertHtml('');o=document.getElementById('paginationtype');o.options.selected = true}};</div>



4.打开/phpcms/libs/classes/form.class.php 添加一些内容，目的是加上编辑器底部的三个按钮。（phpcms之前是在 ckeditor.js中做的。）

在下面代码后面


<div>


代码如下:
</div>
<div id="phpcode13">
 
if(!defined('IMAGES_INIT')) { 
$ext_str .= '<script type="text/javascript" src="'.JS_PATH.'swfupload/swf2ckeditor.js"></script>'; 
define('IMAGES_INIT', 1); 
}</div>



添加：


<div>


代码如下:
</div>
<div id="phpcode14">
 
$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>";</div>



5.复制旧版ckeditor/skins/kama/images/文件夹下的文件到新版ckeditor/skins/moono/images/下。目的是一些样式的需要。

6.打开ckeditor\skins\moonoeditor_gecko.css文件，在最后加入三个按钮的样式即可


<div>


代码如下:
</div>
<div id="phpcode15">
 
/*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"); 
}</div>



到此，ckeditor编辑器升级完成，需要说明一下的是，phpcms本身自带一个capture插件，本次升级没有考虑它，一是用处不大，而是只能在ie中使用。

如有什么疑问或错误，请告知，谢谢！

頁: [1]

琼殿技术论坛's Archiver

phpcms中的ckeditor编辑器升级方法