Using Custom jQuery and jQuery Mobile Libraries

Contents

The aim of this article is to explain how to set up CKFinder with custom jQuery libraries.

CKFinder has jQuery and jQuery Mobile dependencies which are bundled with the CKFinder package. If your website uses jQuery or jQuery Mobile, you can point CKFinder to them so that CKFinder could use the libraries that have already been loaded instead of requesting them twice.

You can also use jQuery and jQuery Mobile from their official CDN, which will additionally speed up loading the application.

Setup for the Default (moono) Skin

Below is an example configuration where jQuery libraries are loaded from CDN:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CKFinder 3</title>
    <script src="/ckfinder/ckfinder.js"></script>
</head>
<body>
<div id="ckfinder1"></div>
    <script>
        CKFinder.widget( 'ckfinder1', {
            // jQuery
            jquery: '//code.jquery.com/jquery-2.1.3.min.js',

            // jQuery Mobile "core" files, used regardless of which skin is enabled.
            jqueryMobile: '//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js',
            jqueryMobileStructureCSS: '//code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css',
        } );
    </script>
</body>
</html>

Setup for the jquery-mobile Skin

Optionally, if you use the jquery-mobile skin, you can also set config.themeCSS to load the theme CSS file from the CDN as well:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CKFinder 3</title>
    <script src="/ckfinder/ckfinder.js"></script>
</head>
<body>
    <div id="ckfinder1"></div>
    <script>
        CKFinder.widget( 'ckfinder1', {
            // jQuery
            jquery: '//code.jquery.com/jquery-2.1.3.min.js',

            // jQuery Mobile "core" files, used regardless of which skin is enabled.
            jqueryMobile: '//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js',
            jqueryMobileStructureCSS: '//code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css',

            // jQuery Mobile theme CSS file, change this path only if the 'jquery-mobile' skin is used.
            themeCSS: '//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css'
            skin: 'jquery-mobile'
        } );
    </script>
</body>
</html>