rich-filemanager
Version:
Highly customizable open-source file manager
255 lines (210 loc) • 10.1 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">
<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 class="input-append">
<input id="js-window-input" type="text" value="">
<button id="js-window-button">SELECT</button>
</div>
<div class="input-append">
<input id="fm-bs-modal-input" type="text" value="">
<a data-toggle="modal" data-target="#fm-bs-modal" class="btn" type="button">Select</a>
</div>
<div id="fm-bs-modal" class="modal fade">
<div class="modal-dialog" style="width: 1000px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" style="width: 100%; height: 600px">
<iframe width="100%" height="100%" src="" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
<div class="input-append">
<input id="fancybox-input" type="text" value="">
<a id="fancybox-button" class="btn" type="button" href="./../index.html?context=fancybox">Select</a>
</div>
<form>
<textarea name="editor_ckeditor" id="editor_ckeditor" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
</form>
<form method="post">
<textarea name="editor_tinymce4" id="editor_tinymce4" rows="10" cols="80">
This is my textarea to be replaced with TinyMCE 4 editor.
</textarea>
</form>
<script type="text/javascript" src="assets/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="//cdn.ckeditor.com/4.8.0/standard-all/ckeditor.js"></script>
<script type="text/javascript" src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
/*---------------------------------------------------------
Simple javascript window example
---------------------------------------------------------*/
// $('#js-window-button').on('click', function() {
// window.open("./../index.html?context=js-window", 'targetWindow',
// 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=800, height=800');
// });
$('#js-window-button').on('click', function() {
var opener = window.open("./../index.html", 'targetWindow',
'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=800, height=800');
function handlePostMessage(e) {
var data = e.originalEvent.data;
console.log('js-data', data);
if (data.source === 'richfilemanager') {
$('#js-window-input').val(data.preview_url);
opener.close();
}
// remove an event handler
$(window).off('message', handlePostMessage);
}
$(window).on('message', handlePostMessage);
});
/*---------------------------------------------------------
Bootstrap 3 modal window with iframe example
---------------------------------------------------------*/
// $('#fm-bs-modal').on('show.bs.modal', function() {
// $(this).find('iframe').attr('src', './../index.html?context=bootstrap');
// });
$('#fm-bs-modal').on('show.bs.modal', function() {
$(this).find('iframe').attr('src', './../index.html');
function handlePostMessage(e) {
var data = e.originalEvent.data;
if (data.source === 'richfilemanager') {
$('#fm-bs-modal-input').val(data.preview_url);
$('#fm-bs-modal').find('.close').click();
// remove an event handler
$(window).off('message', handlePostMessage);
}
}
$(window).on('message', handlePostMessage);
});
/*---------------------------------------------------------
Fancybox iframe example
---------------------------------------------------------*/
$('#fancybox-button').fancybox({
'width': '90%',
'height': '90%',
'type': 'iframe',
'autoSize': false
});
$('#fancybox-button').on('click', function() {
function handlePostMessage(e) {
var data = e.originalEvent.data;
if (data.source === 'richfilemanager') {
$('#fancybox-input').val(data.preview_url);
$.fancybox.close();
// remove an event handler
$(window).off('message', handlePostMessage);
}
}
$(window).on('message', handlePostMessage);
});
});
/*---------------------------------------------------------
TinyMCE 4 init example
---------------------------------------------------------*/
tinymce.init({
selector: '#editor_tinymce4',
plugins : 'advlist autolink link image lists charmap print preview',
file_browser_callback : function(field_name, url, type, win) {
// from http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var cmsURL = './../index.html?&field_name='+field_name+'&langCode=en';
if(type == 'image') {
cmsURL = cmsURL + "&filter=image";
}
tinyMCE.activeEditor.windowManager.open({
file : cmsURL,
title : 'Filemanager',
width : x * 0.8,
height : y * 0.8,
resizable : "yes",
close_previous : "no"
});
}
});
/*---------------------------------------------------------
CKEditor init example
---------------------------------------------------------*/
CKEDITOR.replace('editor_ckeditor');
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
}
}
}
});
// Direct usage example
// CKEDITOR.config.removePlugins = 'image';
// CKEDITOR.config.extraPlugins = 'image2';
// CKEDITOR.replace('editor_ckeditor', {
// filebrowserBrowseUrl: './',
// filebrowserUploadUrl : './connectors/php/filemanager.php?mode=upload&path=/',
// filebrowserImageBrowseUrl : './',
// filebrowserImageUploadUrl : './connectors/php/filemanager.php?mode=upload&path=/',
// filebrowserWindowWidth : 1200,
// filebrowserWindowHeight : 800
// });
</script>
</body>
</html>