Custom File manager in CKEditor

Let’s take CKEditorTest.html. Write below code to use CKEditor in your html page.

<script src="~/Scripts/ckeditor/ckeditor.js"></script>

<script src="~/Scripts/ckeditor/adapters/jquery.js"></script>

<div class="row">    

    <textarea id="txtEditor"></textarea>

</div>

<script>

$(document).ready(function () {

 // Change in CKEditor config allow to set custom file browser Url 

        CKEDITOR.editorConfig = function (config) {

            // Enter Url of your target page which 

                you wants to open on browse button click.

            config.filebrowserBrowseUrl = "http://localhost:12081/filemanager.html";

        }        

        $('#txtEditor').ckeditor();

    });

</ script>

The above script will create instance of CKEditor and also set custom file browser window.

Now in filemanager.html page, Add below script to select file and set in parent CKEditor window. 

<script>

    $(document).ready(function () {

        $("jquery selector").click(function () {

            //  Source path of file

            var url = this.src;

            var parentWindow = (window.parent == window) ? window.opener : window.parent;

            // Find Function number from Querystring

            var funcNum = QueryString('CKEditorFuncNum');

            if (parentWindow['CKEDITOR']) {

                // Invoke function

                parentWindow['CKEDITOR'].tools.callFunction(funcNum, url);

                window.close();

            }

        });

    });

    function QueryString(name) {

        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");

        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),

            results = regex.exec(location.search);

        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));

    }

</script>

Hooray ! Now you can create your custom file manager with your own settings.