Skip to content

How to open the Filemanager from CKEditor in a modal window

Jump to bottom
pavel edited this page Nov 20, 2017 · 4 revisions

It is possible to integrate Filemanager to CKEditor in a modal window mode. This should be done when instantiating CKEditor itself.

With the assertion you have a HTML textarea tag named 'editor1'. The Javascript part would be the normal instantiation followed by a dialogDefinition instruction :

CKEDITOR.replace('editor1');

CKEDITOR.on('dialogDefinition', function (event)
{
    var editor = event.editor;
    var dialogDefinition = event.data.definition;
    var dialogName = event.data.name;

    var cleanUpFuncRef = CKEDITOR.tools.addFunction(function ()
    {
        // Do the clean-up of filemanager here (called when an image was selected or cancel was clicked)
        $('#fm-iframe').remove();
        $("body").css("overflow-y", "scroll");
    });

    var tabCount = dialogDefinition.contents.length;
    for (var i = 0; i < tabCount; i++) {
        var dialogTab = dialogDefinition.contents[i];
        if (!(dialogTab && typeof dialogTab.get === 'function')) {
            continue;
        }

        var browseButton = dialogTab.get('browse');
        if (browseButton !== null) {
            browseButton.hidden = false;
            browseButton.onClick = function (dialog, i) {
                editor._.filebrowserSe = this;
                var iframe = $("<iframe id='fm-iframe' class='fm-modal'/>").attr({
                    src: './index.html' + // Change it to wherever  Filemanager is stored.
                        '?CKEditorFuncNum=' + CKEDITOR.instances[event.editor.name]._.filebrowserFn +
                        '&CKEditorCleanUpFuncNum=' + cleanUpFuncRef +
                        '&langCode=en' +
                        '&CKEditor=' + event.editor.name
                });

                $("body").append(iframe);
                $("body").css("overflow-y", "hidden");  // Get rid of possible scrollbars in containing document
            }
        }
    }
}); // dialogDefinition

Note that CKEditorFuncNum, CKEditorCleanUpFuncNumand CKEditor are mandatory parameters.

Since the script uses an iframe, it can be styled using CSS. You can change it to whatever you want or set it dynamically using jquery .css() syntax.

Here comes the default proposed style (based on default CKEditor style) :

.fm-modal {
	z-index: 10011; /** Because CKEditor image dialog was at 10010 */
	width:80%;
	height:80%;
	top: 10%;
	left:10%;
	border:0;
	position:fixed;
	-moz-box-shadow: 0px 1px 5px 0px #656565;
	-webkit-box-shadow: 0px 1px 5px 0px #656565;
	-o-box-shadow: 0px 1px 5px 0px #656565;
	box-shadow: 0px 1px 5px 0px #656565;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=5);
}

A full example page is given below. It requires CKEditor installation to work correctly :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>File Manager</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="./ckeditor/ckeditor.js"></script>
<style type="text/css">
.fm-modal {
	z-index: 10011; /** Because CKEditor image dialog was at 10010 */
	width:80%;
	height:80%;
	top: 10%;
	left:10%;
	border:0;
	position:fixed;
	-moz-box-shadow: 0px 1px 5px 0px #656565;
	-webkit-box-shadow: 0px 1px 5px 0px #656565;
	-o-box-shadow: 0px 1px 5px 0px #656565;
	box-shadow: 0px 1px 5px 0px #656565;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=5);
}
</style>
</head>
<body>
	<div>
		<textarea cols="80" id="editor1" name="editor1" rows="10">
		</textarea>
	</div>
<script>
CKEDITOR.replace('editor1');

CKEDITOR.on('dialogDefinition', function (event)
{
    var editor = event.editor;
    var dialogDefinition = event.data.definition;
    var dialogName = event.data.name;

    var cleanUpFuncRef = CKEDITOR.tools.addFunction(function ()
    {
        // Do the clean-up of filemanager here (called when an image was selected or cancel was clicked)
        $('#fm-iframe').remove();
        $("body").css("overflow-y", "scroll");
    });

    var tabCount = dialogDefinition.contents.length;
    for (var i = 0; i < tabCount; i++) {
        var dialogTab = dialogDefinition.contents[i];
        if (!(dialogTab && typeof dialogTab.get === 'function')) {
            continue;
        }

        var browseButton = dialogTab.get('browse');
        if (browseButton !== null) {
            browseButton.hidden = false;
            browseButton.onClick = function (dialog, i) {
                editor._.filebrowserSe = this;
                var iframe = $("<iframe id='fm-iframe' class='fm-modal'/>").attr({
                    src: './index.html' + // Change it to wherever  Filemanager is stored.
                        '?CKEditorFuncNum=' + CKEDITOR.instances[event.editor.name]._.filebrowserFn +
                        '&CKEditorCleanUpFuncNum=' + cleanUpFuncRef +
                        '&langCode=en' +
                        '&CKEditor=' + event.editor.name
                });

                $("body").append(iframe);
                $("body").css("overflow-y", "hidden");  // Get rid of possible scrollbars in containing document
            }
        }
    }
}); // dialogDefinition
</script>
</body>
</html>

Thanks to @romland for sharing this tip!

Clone this wiki locally