Skip to content

How to open the Filemanager from CKEditor in a modal window ?

Jump to bottom Edit New page
Simon Georget edited this page Apr 23, 2014 · 4 revisions

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

Saying you have a textarea named 'editor1'. The Javascript part would be :

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)
	            $('#filemanager_iframe').remove();
	            $("body").css("overflow-y", "scroll");
	        });

	        var tabCount = dialogDefinition.contents.length;
	        for (var i = 0; i < tabCount; i++) {
	            var browseButton = dialogDefinition.contents[i].get('browse');

	            if (browseButton !== null) {
	                browseButton.hidden = false;
	                browseButton.onClick = function (dialog, i)
	                {
	                    editor._.filebrowserSe = this;
	                    var iframe = $("<iframe id='filemanager_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

Notice that the script use an iframe. The Iframe can be styled using CSS. Here comes the default proposed style. You can change it to whatever you wan or set it dynamically using jquery .css() syntax.

.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);
}

The whole file content would be something similar to :

<!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="./test/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 browseButton = dialogDefinition.contents[i].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 a lot to @romland for sharing this tip!

Add a custom footer
Add a custom sidebar

Clone this wiki locally