CKEditor:
1.解压CKEditor到webRoot目录,在应用页面加载其ckeditor.js ;
2.页面textarea:

<textarea cols=”80″; name=”editor1″ rows=”10″></textarea>

CKFinder:
3.解压CKFinder到webRoot目录(最好与CKEditor同级),在应用页面加载其ckfinder.js ;
4.页面script:(最好textarea之后)


if (typeof CKEDITOR == ‘undefined’) {
document.write(’加载CKEditor失败’);
}
else {
var editor = CKEDITOR.replace(’editor1′);
CKFinder.SetupCKEditor(editor, ‘../ckeditor/ckfinder/’); //ckfinder总目录的相对路径.
}

整合:
(把俩js加载到同一文件其实就已经基本整合好了,还需要修改的配置如下)
5.打开\ckfinder\config.php,修改$baseUrl = ‘(上传附件的存放路径)’; //以webRoot为起始的绝对路径,其目录下会自动生成images、flash等子目录;默认是在webRoot的根目录下,注意修改。

至此配置完毕,如果需要自定义界面,可进行以下的高级修改:

6.在ckeditor\config.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码:

//字体.
    config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial; Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;';

    //工具按钮.
    config.toolbar=
        [
        ['Source','-','Save','NewPage','Preview','-','Templates'],

        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],

        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

        ['Form','Checkbox','Radio','TextField','Textarea','Select','Button',

            'ImageButton','HiddenField'],

        '/',

        ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],

        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

        ['Link','Unlink','Anchor'],

        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar',

            'PageBreak'],

        '/',

        ['Styles','Format','Font','FontSize'],

        ['TextColor','BGColor'],

        ['Maximize','ShowBlocks','-','About']

    ];

    //宽度
    config.width = 500;

    //高度
    config.height = 400;

    //皮肤
    config.skin='v2';

安装CKFinder后才能有上传功能:


第二步:设置CKFinder的上传功能


由于本次CKEditor全新改版,没有提供文件上传功能,所以选择整合CKFinder是个不错的选择
需要修改一下CKEditor插件文件夹下的JS源码,以image插件为例(Flash及Files同理):
Code

//将下边的代码做一些修改
//{type:'button',id:'browse',align:'center',label:m.lang.common.browseServer,hidden:false,filebrowser:'info:txtUrl'}]}]},
//2009-07-13 将浏览服务器按钮置为显示状态 (hidden: false),增加onClick函数,用于打开ckfinder页面,紧接着上面的代码添加
{ type: 'button', id: 'browse', align: 'center', label: m.lang.common.browseServer, hidden: false, filebrowser: 'info:txtUrl', onClick: function() { var finder = new CKFinder(); finder.BasePath = '../ckfinder20090716/'; finder.SelectFunction = SetFileField; finder.Popup(); } }]}]},


在方法体外增加下边的函数
//用于取回 ckfinder 返回的图片地址并对路径文本框和预览图片进行赋值
function SetFileField(fileUrl)
{
   //获取主Div下的所有文本框控件
    var inputStr = document.getElementById("cke_txtContent_dialog").getElementsByTagName("Input");
    for(var i=0; i<inputStr.length; i++)
    {
        if(inputStr[i].type=="text")
        {
            //第一个输入框控件是图像路径,得到ID,设置新的图片路径
            CKEDITOR.document.getById(inputStr[i].id).setValue(fileUrl);
            break ;
        }
    }
    CKEDITOR.document.getById('previewImage').setAttribute('src', decodeURI(fileUrl));
}


第三步:CKFINDER上传问题:出现“因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“


整合后会出现“因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“

The Solution:

1. There is no write access for the default upload folder $baseUrl = '/userfiles/'; in ckfinder/config.php.
对于目标文件夹$baseUrl = '/userfiles/';没有写入权限

2. This is maybe because the Return value of Funcation CheckAuthentication() is always FALSE by default in ckfinder/config.php. Change the Validation Condition according to your condition, not recommend to set the return value to true directly.
因为出于安全考虑ckfinder/config.php文件中的CheckAuthentication()函数默认返回值是false, 需要手动修改验证条件, 不建议直接返回true


好了,最后一步了,由于ckfinder不是免费的,所以默认情况下会在上传页面中有红色的广告提示,虽然不影响使用,但总是觉得
不爽。
去除方法如下:找到ckfinder/core/js/ckfinder_ie.js及ckfinder_gecko.js,将其中的 en.call(window,qo);去掉