Author: 刘老师(Aaron Lau)

jQuery的常用插件之ckeditor与ckfinder

官网地址，使用前，请先自行下载最新版的ckeditor与ckfinder

ckeditor是一个非常流行的web编辑器,ckeditor上传文件/图片,依赖ckfinder.

1. ckeditor使用方法

<textarea name="editor1" class="content"></textarea>

<script src="/static/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/static/ckfinder/ckfinder.js"></script>

<script>
CKEDITOR.replace('editor1',
{
    filebrowserBrowseUrl: '/static/ckfinder/ckfinder.html',
    filebrowserImageBrowseUrl: '/static/ckfinder/ckfinder.html?type=Images',
    filebrowserFlashBrowseUrl: '/static/ckfinder/ckfinder.html?type=Flash',
    filebrowserUploadUrl: '/static/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
    filebrowserImageUploadUrl: '/static/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
    filebrowserFlashUploadUrl: '/static/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
</script>

注意,还有一个配置必须修改,否则上传失败!

//CKfinder根目录下,config.php
function CheckAuthentication()
{
    //如果您不需要做安全验证,请直接return true;

    //安全验证
    if(isset($_SESSION['isLogin'])){
        return true;
    }
    return false;
}

2. 单独使用ckfinder上传图片

<input type="text" id="thumb1" class="span5" name="thumb">
<input type="button"  value="上 传" onclick="BrowseServer('thumb1','img_show1')" class="btn btn-success" />
<img src="" id="img_show1" width="90px" height="90px" />

<script src="/static/ckfinder/ckfinder.js"></script>
<script>
function BrowseServer(thumb, img_show) {
    var finder = new CKFinder();

    //当选中图片时执行的函数
    finder.selectActionFunction = function(fileUrl){
        $("#"+thumb).val(fileUrl);
        $("#"+img_show).attr("src",""+fileUrl+"");
    }

    finder.popup();//调用窗口
}

3. ckfinder单独使用管理项目附件

拿ckfinder管理项目的附件资源,是一个非常棒的选择.

但是有几个问题需要注意:

1. ckfinder是收费软件,当然也可以免费使用,就是会出来一个广告条(如需屏蔽,请自己想办法).
2. ckfinder上传文件,中文文件名会出问题(请自行解决)

<script type="text/javascript" src="/static/ckfinder/ckfinder.js"></script>
<div id="ckfinder" style="margin-top:-38px;"></div>
<script type="text/javascript">
    //<![CDATA[
    (function()
    {
        var config = {};
        var get = CKFinder.tools.getUrlParam;
        var getBool = function( v )
        {
            var t = get( v );

            if ( t === null )
                return null;

            return t == '0' ? false : true;
        };

        var tmp;
        if ( tmp = get( 'configId' ) )
        {
            var win = window.opener || window;
            try
            {
                while ( ( !win.CKFinder || !win.CKFinder._.instanceConfig[ tmp ] ) && win != window.top )
                    win = win.parent;

                if ( win.CKFinder._.instanceConfig[ tmp ] )
                    config = CKFINDER.tools.extend( {}, win.CKFinder._.instanceConfig[ tmp ] );
            }
            catch(e) {}
        }

        if ( tmp = get( 'basePath' ) )
            CKFINDER.basePath = tmp;

        if ( tmp = get( 'startupPath' ) || get( 'start' ) )
            config.startupPath = decodeURIComponent( tmp );

        config.id = get( 'id' ) || '';

        if ( ( tmp = getBool( 'rlf' ) ) !== null )
            config.rememberLastFolder = tmp;

        if ( ( tmp = getBool( 'dts' ) ) !== null )
            config.disableThumbnailSelection = tmp;

        if ( tmp = get( 'data' ) )
            config.selectActionData = tmp;

        if ( tmp = get( 'tdata' ) )
            config.selectThumbnailActionData = tmp;

        if ( tmp = get( 'type' ) )
            config.resourceType = tmp;

        if ( tmp = get( 'skin' ) )
            config.skin = tmp;

        if ( tmp = get( 'langCode' ) )
            config.language = tmp;

        if ( typeof( config.selectActionFunction ) == 'undefined' )
        {
            // Try to get desired "File Select" action from the URL.
            var action;
            if ( tmp = get( 'CKEditor' ) )
            {
                if ( tmp.length )
                    action = 'ckeditor';
            }
            if ( !action )
                action = get( 'action' );

            var parentWindow = ( window.parent == window ) ? window.opener : window.parent;
            switch ( action )
            {
                case 'js':
                    var actionFunction = get( 'func' );
                    if ( actionFunction && actionFunction.length > 0 )
                        config.selectActionFunction = parentWindow[ actionFunction ];

                    actionFunction = get( 'thumbFunc' );
                    if ( actionFunction && actionFunction.length > 0 )
                        config.selectThumbnailActionFunction = parentWindow[ actionFunction ];
                    break ;

                case 'ckeditor':
                    var funcNum = get( 'CKEditorFuncNum' );
                    if ( parentWindow['CKEDITOR'] )
                    {
                        config.selectActionFunction = function( fileUrl, data )
                        {
                            parentWindow['CKEDITOR'].tools.callFunction( funcNum, fileUrl, data );
                        };

                        config.selectThumbnailActionFunction = config.selectActionFunction;
                    }
                    break;

                default:
                    if ( parentWindow && parentWindow['FCK'] && parentWindow['SetUrl'] )
                    {
                        action = 'fckeditor' ;
                        config.selectActionFunction = parentWindow['SetUrl'];

                        if ( !config.disableThumbnailSelection )
                            config.selectThumbnailActionFunction = parentWindow['SetUrl'];
                    }
                    else
                        action = null ;
            }
            config.action = action;
        }

        // Always use 100% width and height when nested using this middle page.
        config.width = config.height = '100%';

        var ckfinder = new CKFinder( config );
        ckfinder.replace( 'ckfinder', config );
    })();
    //]]>
</script>

这个调用方法也许不是最好的,你也可以尝试其他的方法!