214 lines
7.6 KiB
PHP
214 lines
7.6 KiB
PHP
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
|
|
<title>Laravel Filemanager</title>
|
||
|
|
<link rel="shortcut icon" type="image/png" href="{{ asset('vendor/laravel-filemanager/img/72px color.png') }}">
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
|
||
|
|
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1 class="page-header">Integration Demo Page</h1>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<h2 class="mt-4">CKEditor</h2>
|
||
|
|
<textarea name="ce" class="form-control"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<h2 class="mt-4">TinyMCE</h2>
|
||
|
|
<textarea name="tm" class="form-control"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<h2 class="mt-4">Summernote</h2>
|
||
|
|
<textarea id="summernote-editor" name="content"></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<h2 class="mt-4">Standalone Image Button</h2>
|
||
|
|
<div class="input-group">
|
||
|
|
<span class="input-group-btn">
|
||
|
|
<a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-primary text-white">
|
||
|
|
<i class="fa fa-picture-o"></i> Choose
|
||
|
|
</a>
|
||
|
|
</span>
|
||
|
|
<input id="thumbnail" class="form-control" type="text" name="filepath">
|
||
|
|
</div>
|
||
|
|
<div id="holder" style="margin-top:15px;max-height:100px;"></div>
|
||
|
|
<h2 class="mt-4">Standalone File Button</h2>
|
||
|
|
<div class="input-group">
|
||
|
|
<span class="input-group-btn">
|
||
|
|
<a id="lfm2" data-input="thumbnail2" data-preview="holder2" class="btn btn-primary text-white">
|
||
|
|
<i class="fa fa-picture-o"></i> Choose
|
||
|
|
</a>
|
||
|
|
</span>
|
||
|
|
<input id="thumbnail2" class="form-control" type="text" name="filepath">
|
||
|
|
</div>
|
||
|
|
<div id="holder2" style="margin-top:15px;max-height:100px;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<h2 class="mt-4">Embed file manager</h2>
|
||
|
|
<iframe src="/filemanager" style="width: 100%; height: 500px; overflow: hidden; border: none;"></iframe>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
|
||
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
|
||
|
|
<script>
|
||
|
|
var route_prefix = "{{env('APP_URL')}}/files";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- CKEditor init -->
|
||
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.11/ckeditor.js"></script>
|
||
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.5.11/adapters/jquery.js"></script>
|
||
|
|
<script>
|
||
|
|
$('textarea[name=ce]').ckeditor({
|
||
|
|
height: 100,
|
||
|
|
filebrowserImageBrowseUrl: route_prefix + '?type=Images',
|
||
|
|
filebrowserImageUploadUrl: route_prefix + '/upload?type=Images&_token={{csrf_token()}}',
|
||
|
|
filebrowserBrowseUrl: route_prefix + '?type=Files',
|
||
|
|
filebrowserUploadUrl: route_prefix + '/upload?type=Files&_token={{csrf_token()}}'
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- TinyMCE init -->
|
||
|
|
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
|
||
|
|
<script>
|
||
|
|
var editor_config = {
|
||
|
|
path_absolute : "",
|
||
|
|
selector: "textarea[name=tm]",
|
||
|
|
plugins: [
|
||
|
|
"link image"
|
||
|
|
],
|
||
|
|
relative_urls: false,
|
||
|
|
height: 129,
|
||
|
|
file_browser_callback : function(field_name, url, type, win) {
|
||
|
|
var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
|
||
|
|
var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;
|
||
|
|
|
||
|
|
var cmsURL = editor_config.path_absolute + route_prefix + '?field_name=' + field_name;
|
||
|
|
if (type == 'image') {
|
||
|
|
cmsURL = cmsURL + "&type=Images";
|
||
|
|
} else {
|
||
|
|
cmsURL = cmsURL + "&type=Files";
|
||
|
|
}
|
||
|
|
|
||
|
|
tinyMCE.activeEditor.windowManager.open({
|
||
|
|
file : cmsURL,
|
||
|
|
title : 'Filemanager',
|
||
|
|
width : x * 0.8,
|
||
|
|
height : y * 0.8,
|
||
|
|
resizable : "yes",
|
||
|
|
close_previous : "no"
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
tinymce.init(editor_config);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
{!! \File::get(base_path('vendor/unisharp/laravel-filemanager/public/js/stand-alone-button.js')) !!}
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
$('#lfm').filemanager('image', {prefix: route_prefix});
|
||
|
|
// $('#lfm').filemanager('file', {prefix: route_prefix});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var lfm = function(id, type, options) {
|
||
|
|
let button = document.getElementById(id);
|
||
|
|
|
||
|
|
button.addEventListener('click', function () {
|
||
|
|
var route_prefix = (options && options.prefix) ? options.prefix : '/filemanager';
|
||
|
|
var target_input = document.getElementById(button.getAttribute('data-input'));
|
||
|
|
var target_preview = document.getElementById(button.getAttribute('data-preview'));
|
||
|
|
|
||
|
|
window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
|
||
|
|
window.SetUrl = function (items) {
|
||
|
|
var file_path = items.map(function (item) {
|
||
|
|
return item.url;
|
||
|
|
}).join(',');
|
||
|
|
|
||
|
|
// set the value of the desired input to image url
|
||
|
|
target_input.value = file_path;
|
||
|
|
target_input.dispatchEvent(new Event('change'));
|
||
|
|
|
||
|
|
// clear previous preview
|
||
|
|
target_preview.innerHtml = '';
|
||
|
|
|
||
|
|
// set or change the preview image src
|
||
|
|
items.forEach(function (item) {
|
||
|
|
let img = document.createElement('img')
|
||
|
|
img.setAttribute('style', 'height: 5rem')
|
||
|
|
img.setAttribute('src', item.thumb_url)
|
||
|
|
target_preview.appendChild(img);
|
||
|
|
});
|
||
|
|
|
||
|
|
// trigger change event
|
||
|
|
target_preview.dispatchEvent(new Event('change'));
|
||
|
|
};
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
lfm('lfm2', 'file', {prefix: route_prefix});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">
|
||
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.js"></script>
|
||
|
|
<style>
|
||
|
|
.popover {
|
||
|
|
top: auto;
|
||
|
|
left: auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
$(document).ready(function(){
|
||
|
|
|
||
|
|
// Define function to open filemanager window
|
||
|
|
var lfm = function(options, cb) {
|
||
|
|
var route_prefix = (options && options.prefix) ? options.prefix : '/filemanager';
|
||
|
|
window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
|
||
|
|
window.SetUrl = cb;
|
||
|
|
};
|
||
|
|
|
||
|
|
// Define LFM summernote button
|
||
|
|
var LFMButton = function(context) {
|
||
|
|
var ui = $.summernote.ui;
|
||
|
|
var button = ui.button({
|
||
|
|
contents: '<i class="note-icon-picture"></i> ',
|
||
|
|
tooltip: 'Insert image with filemanager',
|
||
|
|
click: function() {
|
||
|
|
|
||
|
|
lfm({type: 'image', prefix: '/filemanager'}, function(lfmItems, path) {
|
||
|
|
lfmItems.forEach(function (lfmItem) {
|
||
|
|
context.invoke('insertImage', lfmItem.url);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return button.render();
|
||
|
|
};
|
||
|
|
|
||
|
|
// Initialize summernote with LFM button in the popover button group
|
||
|
|
// Please note that you can add this button to any other button group you'd like
|
||
|
|
$('#summernote-editor').summernote({
|
||
|
|
toolbar: [
|
||
|
|
['popovers', ['lfm']],
|
||
|
|
],
|
||
|
|
buttons: {
|
||
|
|
lfm: LFMButton
|
||
|
|
}
|
||
|
|
})
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|