midia:您的Laravel项目的简单媒体经理

  • x0_565600
    了解作者
  • 99.1KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-13 19:14
    上传日期
米迪亚 您的Laravel项目的简单媒体管理器。 该软件包可让您以内联模式打开文件。 文件夹中的所有目录将被忽略。 换句话说,只能读取文件。 产品特点 全面响应 读取,重命名,删除文件 无限滚动 搜索 上载多个 多个缩略图大小 多个目录 多实例 可配置的 更多 ... 待办事项清单 多张图片选择 多语言 多用户 UI改进 缩图 要求 PHP> = 5.6.4 jQuery> = 1.12(推荐:1.12) 干预/形象 Dropzone.js Laravel 5 经过测试 Laravel 5.7 Laravel 5.6 Laravel 5.5 Laravel 5.4
midia-master.zip
内容介绍
# Midia ![](https://img.shields.io/badge/license-MIT-green.svg) ![](https://img.shields.io/badge/maintained-Kodinger-orange.svg) ![](https://img.shields.io/badge/php-5.6.0-blue.svg) Simple media manager for your Laravel project. This package lets you open your files as inline modal. All directories in the folder will be ignored. In other words, can only read the file. ![midia](https://i.imgur.com/KOjqofb.gif) # Features - Fully responsive - Read, rename, delete file - Infinite scroll - Search - Upload multiple - Multiple thumbnail sizes - Multiple directories - Multiple instance - Configurable - More ... # Todo List - [ ] Multiple images selection - [ ] Multi language - [ ] Multi user - [ ] UI improvement - [x] Thumbnail # Requirements - PHP >= 5.6.4 - jQuery >= 1.12 (Recommended: 1.12) - intervention/image - Dropzone.js - Laravel 5 # Tested - [x] Laravel 5.7 - [ ] Laravel 5.6 - [x] Laravel 5.5 - [x] Laravel 5.4 - [ ] Laravel 5.3 - [ ] Laravel 5.2 - [ ] Laravel 5.1 - [ ] Laravel 5.0 # Installation Now, this package is available for production. You can install this package using these steps. 1. Install through Composer ``` composer require itskodinger/midia ``` If you're using Laravel 5.6 you can skip this step, since it will be auto discovered by Laravel. 2. Put this line into `config/app.php` in the `providers` key ```php Itskodinger\Midia\MidiaServiceProvider::class, ``` 3. Done! # Usage 1. Publish required assets. ``` php artisan vendor:publish --tag=midia ``` 2. Put this code in the `<head>` tag ```html <meta name="csrf-token" content="{{ csrf_token() }}"> ``` 3. Add these lines before the `</head>` tag ```html <link rel="stylesheet" href="{{asset('vendor/midia/midia.css')}}"> <link rel="stylesheet" href="{{asset('vendor/midia/dropzone.css')}}"> // or using helpers {!! midia_css() !!} ``` 4. Make sure you've included jQuery before and put these lines after jQuery ```html <script src="{{asset('vendor/midia/dropzone.js')}}"></script> <script src="{{asset('vendor/midia/midia.js')}}"></script> // or using helpers {!! midia_js() !!} ``` **Note:** Default, all files that are read and uploaded will be stored in the `storage/media` folder, so create a folder named `media` in the `storage` folder if you have not already created it or you can change the location of the folders you want in `config/midia.php`. # Integration Here we have documented how to use it with TinyMCE 4 and as a stand-alone button. But, you can also try it yourself to be integrated with other editors like: CKEditor, Summernote, etc. If you successfully integrate with other editors, then you can either create `issue` or change the `readme.md` file to document how you do it. ### TinyMCE 4 ```html <textarea class="tinymce"></textarea> <script> var editor_config = { path_absolute: "{{url('')}}/", selector: "textarea.tinymce", plugins: [ "advlist autolink lists link image charmap print preview hr anchor pagebreak", "searchreplace wordcount visualblocks visualchars code fullscreen", "insertdatetime media nonbreaking save table contextmenu directionality", "emoticons template paste textcolor colorpicker textpattern" ], toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media", relative_urls: false, 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 + 'midia/open/tinymce4?field_name=' + field_name; 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> ``` ### Summernote ```html <textarea class="summernote"></textarea> <script> var midia = function(options, cb) { var route_prefix = (options && options.prefix) ? options.prefix : '/midia'; if(options && options.prefix) delete options.prefix; window.open(route_prefix + "?" + $.param(options) || 'file', 'Midia', 'width=900,height=600'); window.SetUrl = cb; }; var MButton = function(context) { var ui = $.summernote.ui; var button = ui.button({ contents: '<i class="note-icon-picture"></i> ', tooltip: 'Insert image with filemanager', click: function() { midia({type: 'image', prefix: '/midia/open/summernote', title: 'Midia Library', locale: 'en'}, function(url, path) { context.invoke('insertImage', url); }); } }); return button.render(); }; $('.summernote').summernote({ minHeight: 150, toolbar: [ ['style', ['bold', 'italic', 'underline', 'clear']], ['font', ['strikethrough']], ['insert', ['link']], ['popovers', ['midia']], ], buttons: { midia: MButton } }) </script> ``` ### Standalone Button #### Popup ```html <input type="text" id="my-file"> <button class="midia-toggle" data-input="my-file">Select File</button> <script> $(".midia-toggle").midia({ base_url: '{{url('')}}' }); </script> ``` #### Inline ```html <div id="media"></div> <script> $("#media").midia({ inline: true, base_url: '{{url('')}}' }); </script> ``` #### Multiple Instance With Different Directories ```html <div id="media1"></div> <div id="media2"></div> <script> <!-- Default directory --> $("#media1").midia({ inline: true, base_url: '{{url('')}}' }); <!-- 'mydocuments' directory --> $("#media2").midia({ inline: true, base_url: '{{url('')}}', directory_name: 'mydocuments' }); </script> ``` You can also use the configuration in `.midia()`. The following is the default configuration: ```javascript { title: 'Midia', identifier: 'fullname', // file attribute that used as identifier inline: false, // if you want to open the media manager as an inline element locale: 'en', // locale for the plugin (note: `lang/midia-lang-[locale].js` file should exist) base_url: '', // base url of your project file_name: '', // set to 'url' if you want to give full URL when choosing file, directory_name = '', // set with the existing key in the `config/midia.php` file in the 'directories' key. For example: 'mydocuments' data_target: 'input', // selector attribute for target file input data_preview: 'preview', // selector attribute for target file preview initial_value: null, // fill with your initial value for midia, initial_preview: null, // fill with your initial preview for media, csrf_field: $("meta[name='csrf-token']").attr('content'), // your CSRF field dropzone: {}, // you can provide other dropzone options onOpen: function() {}, // method when the media manager will be opened onOpened: function() {}, // method when the media manager is opened onClose: function() {}, // method when the media manager is closed onChoose: function() {} // method when the media manager choose File actions: ['copy_url', 'download', 'rename', 'delete'], // pick actions you want available in selected file can_choose: true, // if you want to hide 'pick' button, set it false, customLoadUrl: null, // if you want to use your custom url to load the files => function (limit, key) { ... } customUploadUrl: null, // if you want to use your custom url to upload the files => function () { ... } customRenameUrl: null, // if you want to use your custom url to rename the file => function (file) { ... } customDeleteU
评论
    相关推荐