PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能

一：前端页面代码

<script src="/www/res/ckeditor/ckeditor.js"></script>

<textarea id="articlecontent" ><?php echo $request['content']; ?></textarea>

<script type="text/javascript">

    $('#articlecontent').ckeditor({

       customConfig : 'config_user.js'

    });

</script>

其中上面的config_user.js是用户自定义配置文件，内容如下：

CKEDITOR.editorConfig = function( config ) {

    // The toolbar groups arrangement, optimized for two toolbar rows.

    config.toolbarGroups = [

        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },

        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },

        { name: 'links' },

        { name: 'insert' },

        { name: 'forms' },

        { name: 'tools' },

        { name: 'document',       groups: [ 'mode', 'document', 'doctools' ] },

        { name: 'others' },

        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },

        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },

        { name: 'styles' },

        { name: 'colors' },

        { name: 'about' }

    ];

    // Remove some buttons provided by the standard plugins, which are

    // not needed in the Standard(s) toolbar.

    config.removeButtons = 'Underline,Subscript,Superscript';

    // Set the most common block elements.

    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.

    config.removeDialogTabs = 'image:advanced;link:advanced';

    //自定义配置

    //config.配置项 = 值

    config.width = 800;

    config.height = 300;

    config.uiColor = "#aabbcc";

    //文件的上传管理：加载CKfinder  注意文件路径为网站根目录 使用时，注意ckfinder文件安装路径

    config.filebrowserBrowseUrl      = '/www/res/ckfinder/ckfinder.html';

    config.filebrowserImageBrowseUrl = '/www/res/ckfinder/ckfinder.html?Type=Images';

    config.filebrowserFlashBrowseUrl = '/www/res/ckfinder/ckfinder.html?Type=Flash';

    config.filebrowserUploadUrl      = '/www/res/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';

    config.filebrowserImageUploadUrl = '/www/res/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';

    config.filebrowserFlashUploadUrl = '/www/res/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';

};

二：ckeditor文件安装，

注意因为在ckeditor中已经自定义了配置文件，注意里面配置的与ckfinder文件的相对位置

三：ckfinder文件安装

需要配置上传文件的保存路径，在ckfinder文件夹下的config.php文件中修改

$baseUrl = 'http://www.example.com/www/articlesuploads/';

设置文件的保存路径