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 许可证

itskodinger / midia

维护者

详细信息