phpcms中的ckeditor编辑器升级方法

phpcms中的ckeditor编辑器升级方法

首先说明一下你为什么升级。网上很多人都升级到了ueditor，从fckedotror到ckeditor都有。个人比较喜欢，尤其是开放式的外挂方式。另一个是至少知道如何升级开发插件，这也能为phpcms增色不少。

准备:

1.当前phpcms的最新版本(3.6.6版，带ckeditor)

2.要更换的最新版本为4.2.1

一、开始之前，先说一下phpcms的原ckeeditor和ckeeditor的一些主要区别:

1.原版本的分页符是div标签，而phpcms中编辑器的分页符是[page]。

2.在2.phpcms编辑器的下方，又多了三个按钮，“分页符”、“副标题”、“附件上传”。

3.由于ckeditor版本不同，部分自研插件不兼容。

其次，开始下面的替换。

1.备份phpcms的/statistics/js/ckeeditor文件夹(重命名)。和/phpcms/libs/classes/form.class.PHP(该文件中的一种方法是创建编辑器，使用一些编辑器的工具栏配置需要在这里 *** 作)

2.将新版本的ckedtior复制到/statistics/js/。打开/statistics/js/statics/js/ckeeditor/config.js文件，用旧版本的config.js替换，但请注释掉config.extraplugins=“”；这行(我觉得应该是插件不兼容问题)

复制代码代码如下:
/**
*@licenseCopyright(c)2003-2013,CKSource-FredericoKnabben.Allrightsreserved.
*Forlicensing,seeLICENSE.htmlorhttp://ckeditor.com/license
*/</p> <p>CKEDITOR.editorConfig=function(config){
//Definechangestodefaultconfigurationhere.Forexample:
//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;
};</p> <p>
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');
functioninsert_page(editorid)
{
vareditor=CKEDITOR.instances[editorid];
editor.insertHtml('[page]');
if($('#paginationtype').val()){
$('#paginationtype').val(2);
$('#paginationtype').css("color","red");
}
}</p> <p>functioninsert_page_title(editorid,insertdata)
{
if(insertdata)
{
vareditor=CKEDITOR.instances[editorid];
vardata=editor.getData();
varpage_title_value=$("#page_title_value").val();
if(page_title_value=='')
{
$("#msg_page_title_value").html("<fontcolor='red'>请输入子标题</font>");
returnfalse;
}
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");
}
}
varobjid=MM_objid=key=0;
functionfile_list(fn,url,obj){
$('#MM_file_list_editor1').append('<divid="MM_file_list_'+fn+'">'+url+'<ahref=\'#\'onMouseOver=\'javascript:FilePreview("'+url+'",1);\'onMouseout=\'javascript:FilePreview("",0);\'>查看</a>|<ahref="javascript:insertHTMLToEditor(\'<imgsrc='+url+'>\',\''+fn+'\')">插入</A>|<ahref="javascript:del_file(\''+fn+'\',\''+url+'\','+fn+')">删除</a>
');
}

复制代码如下:
/**
*@LicenseCopyright(C)2003-2013，CKSource-FredericOKNABEN。保留所有权利。
*有关许可信息，请访问LICENSE.html或http://ckeeditor.com/license
*/<；/p>； <；p>ckeeditor.editorconfig=function(config){
//在此定义对默认配置的更改。比如:
//config.language='fr'；
//config.uicolor='#aadc6e'；

config.uicolor='#f7f5f4'；
config.width=“”；
config.removeplugins='elementspath，scayt'；
config.disablenativespellchecker=false；
config.resize_dir='vertical'；
config.keystrokes=[[ckeeditor。CTRL+13/*Enter*/，'最大化']]；
config.extraplugins=''；
config.entermode=ckeeditor。ENTER_BR
config.shiftintermode=ckeeditor。ENTER_P；
config.font_names='μ/μ；粗体/粗体；仿宋/仿宋_GB2312斜体/斜体_GB2312隶书/隶书；幼圆/幼圆；MicrosoftYahe/MicrosoftYahe；'+config.font_names；
}；</p>； <；p>
ckeeditor.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})；}});
//ckeeditor.plugins.load('pgrfilemanager')；
functioninsert_page(editorid)
{
vareditor=ckeeditor.instances[editorid]；
editor.inserthtml('[page]')；
if($('#paginationtype')。val()){
$('#paginationtype')。瓦尔(2)；
$('#paginationtype')。css("颜色"，"红色")；
}
}<；/p>； <；p>functioninsert_page_title(editorid，insertdata)
{
if(insertdata)
{
vareditor=ckeeditor.instances[editorid]；
vardata=editor.getdata()；
varpage_title_value=$("#page_title_value")。val()；
if(page_title_value=='')
{
$("#msg_page_title_value")。html("<；fontcolor='red'>请输入副标题);
返回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')。瓦尔(2)；
$('#paginationtype')。css("颜色"，"红色")；
}
}
else
{
$("#page_title_div")。向下滑动(“快速”)；
}
}
varobjid=MM_objid=key=0；
函数file_list(fn，url，obj){
$('#MM_file_list_editor1')。追加('<divid="MM_file_list_'+fn+'">；'+URL+'<；ahref=\'#\'onMouseOver=\'JavaScript:filepreview("'+URL+'"，1)；\'onMouseout=\'JavaScript:filepreview("，0)；\'>查看

3.打开/statistics/js/CKeditor/CKeditor.js进行一些修改。目的是让工具栏上的分页按钮与phpcms的分页保持一致。

找到:

复制代码如下:
ckeeditor.plugins.pagebreakcmd={exec:function(a){varb=a.lang.pagebreak.alt，b=ckeeditor.DOM.element.createfromhtl('

替换为:

复制代码如下:
ckeeditor.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。='<scripttype="text/JavaScript"src="'。'JS_PATH'swfupload/swf2ckeeditor.js">；</script>；；
define('IMAGES_INIT'，1)；
}

添加:

复制代码如下:
$ext_str。="如果(！$disabled_page){
$ext_str。="<ahref=\"JavaScript:insert_page('content')\">；分页

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

6.打开CKeditor\skins\moonoeditor_gecko.CSS文件，在末尾添加三个按钮的样式。

复制代码如下:
/*phpcms在编辑器底部增加一个按钮样式*/
。CKE_TOP{
背景:URL("images/line.png")重复-x滚动00透明；
}
。cke_footer{
float:left；
margin-top:3px；
}
。cke_footera，。cke_footera:悬停，。cke_footera:已访问，。cke_footera:active{
background:URL("images/cke_fot.gif")repeat-x滚动左下透明；
border:1pxsolid#e0e0e0；
color:#666666；
cursor:指针；
显示:阻止；
float:left；
身高:19px
行高:19px
右边距:8px
填充:010px
}
。cke_footera:hover{
background-position:左上方；
}<；/p>； <；p>
。editor_bottom{
clear:both；
身高:12px
top:-28px；
位置:相对；
}
#page_title_div{
显示:无；
身高:78px
左:18px
位置:绝对；
top:-120px；
宽度:295px
z-index:99999；
}
#page_title_divtable{
后台:无重复滚动00#FFFFFF
border:2pxsolid#d5e0e6；
身高:78px
宽度:295px
}
#page_title_divtableTD{
border:mediumnone；
}
#page_title_divtableTD.title{
color:#333333；
font:18px/31px“微软雅黑”、“simhei”；
高度:26px
margin:0；
填充:00012px
text-align:left；
}
#page_title_diva.closespan{
显示:无；
}
#page_title_diva.close{
background:URL("images/cross.png")无重复向左滚动3px透明；
显示:阻止；
float:右；
高度:16px
右边距:10px
宽度:16px
}
#page_title_diva.close:hover{
background-position:left-46px；
}
。content_attr{
background:none重复滚动00#FFFFCC
border:1pxsolid#CCCCCC；
边距-top:6px；
填充:5px8px
}
#Capture{
color:#474747；
font-size:12px；
行高:20px
}
#Capturefont{
color:#ff0000；
}
#Capturea{
background:URL("images/CDW.png")无重复滚动00透明；
color:#0075c0；
display:inline-block；
左填充:20px
text-decoration:无；
}
#Capturea:hover{
text-decoration:underline；
}
#Capture#CaptureDown{
background-image:URL("images/CD.png")；
}

至此，ckeditor编辑器的升级完成。需要注意的是，phpcms本身自带了一个捕获插件，这次升级不考虑这个插件。第一，用处不大，只能在ie中使用。

如果您有任何问题或错误，请告诉我们。谢谢大家！