准备:
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 = ''; 这一行(我想应该是插件不兼容问题)
*/</p>
<p>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;
};</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');
function insert_page(editorid)
{
var editor = CKEDITOR.instances[editorid];
editor.insertHtml('[page]');
if($('#paginationtype').val()) {
$('#paginationtype').val(2);
$('#paginationtype').css("color","red");
}
}</p>
<p>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>
');
}
</div>
3.打开/statics/js/ckeditor/ckeditor.js 做一些修改,目的是 把工具栏上的分页按钮与phpcms的分页保持一致。
找到:
替换为:
4.打开/phpcms/libs/classes/form.class.php 添加一些内容,目的是加上编辑器底部的三个按钮。(phpcms之前是在 ckeditor.js中做的。)
在下面代码后面
添加:
5.复制旧版ckeditor/skins/kama/images/文件夹下的文件