Monday, 22 August 2016

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.

No comments:

Post a comment