Laravel Media Manager

Laravelメディアマネージャー

• インストール

• 構成

• 特徴

• イベント

• 使用法

インストール

• composer require ctf0/media-manager

• パッケージアセットを公開する

  php artisan vendor:publish --provider="ctf0MediaManagerMediaManagerServiceProvider"

• インストール後、 php artisan lmm:setupを実行して追加します

• パッケージルートをroutes/web.phpに設定します。

• パッケージアセットをwebpack.mix.jsにコンパイルする

• アイテムのロック/ロック解除にはデータベース「sqlite」を使用しますが、他のものを使用したい場合は、移行を実行する必要があります。

   php 職人の移行

• 依存関係をインストールする

  糸の追加 vue vue-ls vue-infinite-loading vue-image-compare2 vue-tippy@v2 vue2-filters vue-input-autowidth vue-notif vue-clipboard2 vue-awesome vue-touch@next vue-focuspoint-component axios Dropzone Cropperjs キーコード Lottie-Web Plyr Fuse.js music-metadata-browser idb-keyval安養
  糸追加バッファプロセス --dev

• この 1 つのライナーをメインの js ファイルに追加し、 npm run watch実行してjs/cssファイルをコンパイルします。

   // app.js// mix v5window.Vue = require('vue')// mix v6import Vue from 'vue'require('../assets/vendor/MediaManager/js/manager')new Vue({el: '＃アプリ'}）

• 問題がある場合は確認してください。

• Mix v6 ノートもチェックしてください

構成

• config/mediaManager.php

特徴

• 画像エディタ

• マルチ

• アップロード

• 移動/コピー

• 消去

• いずれかでアップロードする

• アップロードパネルを使用する

• どこにでもドラッグ＆ドロップ

• 空の領域「アイテムコンテナ」をクリックして押し続けます

• URL 「画像のみ」から

• アップロードする前にファイルをプレビューする

• アップロードされたファイルのrandom/original名を切り替える

• 非同期更新

• 一括選択

• アクセスしたディレクトリをブックマークして、より迅速なナビゲーションを実現

• 項目の表示/非表示を変更する

• ナビゲーション上のページの URL を更新する

• オーディオ ファイル情報「アーティスト、アルバム、年など」を表示します。

• ファイル/フォルダーを動的に非表示にする

• パスへのアクセスを制限する

• 選択したものをダウンロード「一括選択を含む」

• 選択したファイルのリンクを直接コピーする

• マネージャーを使う

• モーダルから

• 任意の wysiwyg エディターを使用

• 「左、上、右、下、ホーム、終了」を使用して選択した項目まで自動スクロールします

• アイテムのロック/ロック解除。

• 現在のディレクトリ内で検索するか、コレクション全体をグローバルに検索します。

• フィルタリング

• フォルダ

• 画像

• オーディオ

• ビデオ

• テキスト/PDF

• アプリケーション/アーカイブ

• ロックされたアイテム

• 選択されたアイテム

• 並べ替え

• 名前

• サイズ

• 最終更新日

• アイテム数は

• 全て

• 選択された

• 検索が見つかりました

• 含有率バー

• 上書きに対する保護 (ファイル/フォルダー)

• ファイル名のサニタイズ

• アップロード

• 名前を変更する

• 新しいフォルダ

• ノイズを回避し、ユーザーの集中力を維持するために、無効/有効ボタンは使用状況に応じて異なります

• ショートカット/ジェスチャー

• サイドバーが非表示の場合、 audio/videoタイプのファイルは、 「画像と同じ」プレビュー カードで開きます。

• application/archiveのタイプのファイルはすべてダウンロードされます。

• 利用可能な行がもうない場合は、 down押すと、 「ネイティブ ファイル マネージャーと同じ」リストの最後の項目に移動します。

• プレビュー カードでaudio/videoファイルを表示しているときに、 spaceを押すと、モーダルを閉じる代わりに項目が再生/一時停止されます。

• dbl クリック/タップ

• すべての左/右ジェスチャには、対応するジェスチャも利用可能です。

• 画像エディターの使用中にescを押してもモーダルは閉じませんが、 modal backgroundダブルクリックまたはタップして閉じることができます。 「誤って変更をキャンセルしないようにするため」 。

- 情報サイドバーは大画面> 1023px"でのみ利用可能です。
- 他のkeydownイベントの干渉を停止するには、マネージャー リスナーを切り替えることができます。
EventHub.fire('disable-global-keys', true/false) 。

ナビゲーション	ボタン	キーボード	クリック/タップ	触る
	アップロードパネルの切り替え（ツールバー）	あなた
	更新(ツールバー)	r	「キャッシュをクリア」を保持します	ピンチイン（アイテムコンテナ）
	移動可能リストの移動/表示(ツールバー)	m/p
	画像エディタ(ツールバー)	e
	削除(ツールバー)	d/デル
	ロック/ロック解除(ツールバー)	私	「画像以外のもの」を保持する
	可視性の変更(ツールバー)	v
	一括選択の切り替え(ツールバー)	b
	(リセット) すべて一括選択(ツールバー)	ある
	可動リスト（ショッピングカート）に追加	c/x	*
	移動・移動リスト（ショッピングカート）を表示		**
	可動リストをクリア（ショッピングカート）		所有
	サイドバー(パスバー)を切り替えます	t	*	左/右にスワイプ(サイドバー)
	確認(モーダル)	入力
	プレビュー画像/PDF/テキスト（アイテム）を切り替えます	空間	**
	メディア（アイテム）の再生/一時停止	空間	**
	非表示 (モーダル/アップロードパネル)	ESC
	リセット（検索/一括選択/フィルター/並べ替え）	ESC
	リセット アップロード showPreview	ESC
	アップロードの確認 showPreview	入力
	移動可能なリスト(アイテム)に追加			上にスワイプ
	(アイテム)を削除する			下にスワイプ
	(アイテム) の名前を変更			左にスワイプ
	画像エディター（アイテム）		所有
	現在選択されている ++ (項目)	シフト+クリック
	現在の + 選択されている(アイテム)	alt/meta + クリック
	新しいフォルダーを作成する		** (アイテムコンテナ)
次の「項目」へ		右	*	左にスワイプ(プレビュー)
前の「アイテム」に移動		左	*	右にスワイプ(プレビュー)
最初の「項目」に移動		家
最後の「項目」に移動		終わり
次の「行」に移動		下		上にスワイプ(プレビュー)
前の「行」に移動		上		下にスワイプ(プレビュー)
フォルダを開く		入力	**
前の「ディレクトリ」に移動	フォルダ名(パスバー)	バックスペース	*	右にスワイプ(アイテムコンテナ)

イベント

タイプ	イベント名	説明
JS
	モーダルショー	モーダルが表示されている場合
	モーダル非表示	モーダルが非表示になっている場合
	file_selected (モーダル内の場合)	選択したファイルのURLを取得する
	multi_file_selected (モーダル内の場合)	選択したファイルの URL を一括取得する
	folder_selected (モーダル内の場合)	選択したフォルダーのパスを取得する
ララベル
	MMFileUploaded($file_path, $mime_type, $options)	アップロードされたファイルのストレージ パス、MIME タイプ、カスタム オプションを取得します
	MMFileSaved($file_path, $mime_type)	保存された (編集/リンク) 画像の完全なストレージ パス、MIME タイプを取得します。
	MMFileDeleted($file_path, $is_folder)	削除されたアイテムがフォルダーの場合、削除されたファイル/フォルダーのストレージ パスを取得します
	MMFileRenamed($old_path, $new_path)	名前変更されたファイル/フォルダーの「古いおよび新しい」ストレージ パスを取得します
	MMFileMoved($old_path, $new_path)	ファイル/フォルダーの「古いものと新しい」ストレージ パスを移動する

使用法

ウィキ
デモ

• localhost:8000/mediaにアクセスします

安全

セキュリティ関連の問題を発見した場合は、[email protected] まで電子メールでご連絡ください。