## Note Check `vendor/unisharp/laravel-filemanager/src/views/demo.blade.php`, which already integrated all options from below. ## WYSIWYG Editor Integration: ### Option 1: CKEditor ```html ``` * Sample 1 - Replace by ID: ```html ``` * Sample 2 - With JQuery Selector: ```html ``` ### Option 2: TinyMCE5 ```html ``` ### Option 3: TinyMCE4 ```html ``` ### Option 4: Summernote ```html ``` ## Standalone button If you are going to use filemanager independently, meaning set the value of an input to selected photo/file url, follow this structure: 1. Create a button, input, and image preview holder if you are going to choose images. Specify the id to the input and image preview by `data-input` and `data-preview`. ```html
Choose
``` 1. Import lfm.js(run `php artisan vendor:publish` if you need). ```html ``` 1. Init filemanager with type. (requires jQuery) ```javascript $('#lfm').filemanager('image'); ``` or ```javascript $('#lfm').filemanager('file'); ``` Domain can be specified in the second parameter(optional, but will be required when developing on Windows mechines) : ```javascript var route_prefix = "url-to-filemanager"; $('#lfm').filemanager('image', {prefix: route_prefix}); ``` ## JavaScript integration In case you are developing javascript application and you want dynamically to trigger filemanager popup, you can create function like this. It doesn't rely on jQuery. ```javascript var lfm = function(id, type, options) { let button = document.getElementById(id); button.addEventListener('click', function () { var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-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')); }; }); }; ``` And use it like this: ```javascript var route_prefix = "url-to-filemanager"; lfm('lfm', 'image', {prefix: route_prefix}); lfm('lfm2', 'file', {prefix: route_prefix}); ``` The first parameter is id, the second parameter is the type of laravel filemanager(which ). ## Embed file manager ```html ```