README

适用于您的Laravel项目的简单媒体管理器。此包允许您以内联模态打开文件。文件夹中的所有目录都将被忽略。换句话说，只能读取文件。

功能

完全响应式
读取、重命名、删除文件
无限滚动
搜索
批量上传
多种缩略图大小
多个目录
多个实例
可配置
更多...

待办事项列表

多图选择
多语言
多用户
UI改进
缩略图

要求

PHP >= 5.6.4
jQuery >= 1.12 (推荐：1.12)
intervention/image
Dropzone.js
Laravel 5

已测试

Laravel 5.7
Laravel 5.6
Laravel 5.5
Laravel 5.4
Laravel 5.3
Laravel 5.2
Laravel 5.1
Laravel 5.0

安装

现在，此包可用于生产环境。您可以使用以下步骤安装此包。

通过Composer安装

composer require itskodinger/midia

如果您正在使用Laravel 5.6，您可以跳过此步骤，因为Laravel将自动发现它。

将此行放入 config/app.php 中的 providers 键

Itskodinger\Midia\MidiaServiceProvider::class,

完成！

用法

发布必需的资产。

php artisan vendor:publish --tag=midia

将此代码放入 <head> 标签

<meta name="csrf-token" content="{{ csrf_token() }}">

在 </head> 标签之前添加这些行

<link rel="stylesheet" href="{{asset('vendor/midia/midia.css')}}">
<link rel="stylesheet" href="{{asset('vendor/midia/dropzone.css')}}">

// or using helpers

{!! midia_css() !!}

确保您已包含jQuery，并将这些行放在jQuery之后

<script src="{{asset('vendor/midia/dropzone.js')}}"></script>
<script src="{{asset('vendor/midia/midia.js')}}"></script>

// or using helpers

{!! midia_js() !!}

注意：默认情况下，所有读取和上传的文件都将存储在 storage/media 文件夹中，因此如果您尚未创建，请在 storage 文件夹中创建一个名为 media 的文件夹，或者您可以在 config/midia.php 中更改您想要的文件夹位置。

集成

在此，我们记录了如何将其与TinyMCE 4和作为独立按钮一起使用。但是，您也可以尝试将其与其他编辑器（如：CKEditor、Summernote等）集成。

如果您成功将其与其他编辑器集成，那么您可以通过创建 issue 或更改 readme.md 文件来记录您如何操作。

TinyMCE 4

<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

<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>

独立按钮

弹出窗口

<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>

内联

<div id="media"></div>

<script>
	$("#media").midia({
		inline: true,
		base_url: '{{url('')}}'
	});
</script>

具有不同目录的多个实例

<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>

您还可以使用 .midia() 中的配置。以下为默认配置

{
    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) { ... }
    customDeleteUrl: null, // if you want to use your custom url to delete the file => function (file) { ... }
    load_ajax_type: 'get', // default ajax type to fetch files is 'get', you can change with 'post' http method
}

或者，您可以使用data-attributes来更改设置，使用 data-midia 后跟您的设置属性，例如 data-midia-your_setting_want_to_change

    <div data-midia data-midia-title="Inline Midia" data-midia-inline="true" data-midia-actions='["rename","delete"]' data-midia-can_choose="false"></div>

覆盖默认设置

您可以通过在创建实例之前添加以下代码来覆盖所有实例的默认设置

$.fn.midia.defaultSettings.name_of_setting = 'new value';

// Example:
$.fn.midia.defaultSettings.title = 'Midia Manager';
$.fn.midia.defaultSettings.base_url = '/';

设置器

您还可以动态更改设置，但之后必须刷新

    var midiaObj = $(".midia-toggle").midia();
    midiaObj.midia('title', 'New Title').midia('refresh');
    // or
    midiaObj.midia({title: 'New Title'}).midia('refresh');

获取器

您可以通过以下Midia属性获取值

el: 获取DOM元素
settings: 获取设置
value: 获取值，在您选择文件后

使用此方法

    var midiaObj = $(".midia-toggle").midia();
    midiaObj.midia('el');
    midiaObj.midia('settings');
    midiaObj.midia('value');

方法

Midia具有以下方法

refresh: 刷新Midia，包括清空值，并实施您之前更改的设置。
open: 打开Midia对话框模态
close: 关闭Midia对话框模态

使用此方法

    var midiaObj = $(".midia-toggle").midia();
    midiaObj.midia('refresh');
    midiaObj.midia('open');
    midiaObj.midia('close');

打开文件

要在浏览器中打开文件，您可以轻松地这样做

http://yourdomain.com/media/filename.extension

例如

http://yourdomain.com/media/image.png

注意：您可以在 config/midia.php 文件中更改 media 前缀

动态调整图片大小

您可以快速调整图片大小，将 width 参数设置为所需的像素大小，并将 height 参数设置为所需的大小。如果未设置 width 参数，则将其设置为与 height 参数相等；如果未设置 height 参数，则将其设置为与 width 参数相等。

For 100px * 300px image:
http://yourdomain.com/media/image.png?width=100&height=300
For 100px * 100px image:
http://yourdomain.com/media/image.png?width=100

注意： 将图片大小调整超过原始大小可能会使图片模糊。

配置

您可以在 config/midia.php 文件中更改默认配置。

<?php
return [
    // DEFAULT Target directory
    'directory' => storage_path('media'),
    // For URL (e.g: http://base/media/filename.ext)
    'directory_name' => 'media',
    'url_prefix' => 'media',
    'prefix' => 'midia',

    // 404
    '404' => function() {
    	return abort(404);
    },

    // Multiple target directories
    'directories' => [
    	// Examples:
    	// ---------
    	// 'home' => [
    	// 	'path' => storage_path('media/home'),
    	// 	'name' => 'media/home' // as url prefix
    	// ],
    	'mydocuments' => [
    		'path' => storage_path('mydocuments'),
    		'name' => 'mydocuments' // as url prefix
    	],
    ],

    // Thumbnail size will be generated
	'thumbs' => [100/*, 80, 100*/],
];

作者

此包最初由 @nauvalazhar 初始化，并由 @itskodinger 维护。随后，所有贡献者：@rizalfakhri12 @mrofi @captainspain @zeroseed @tpaksu 使其变得非凡。

许可证

MIT 许可证

nauvalazhar / midia

维护者

详情