README

同时，它使用 File 门面进行所有文件操作，这意味着它不使用 disk()。计划将其切换到 storage() 门面，以便与 AWS 集成并使文件管理器更加可配置。

它目前拥有的功能

通过上传表单上传单个文件
通过拖放上传多个文件
重命名文件
移动文件
删除文件
创建新目录
重命名目录
移动目录
删除目录（及目录中的文件）
将文件从文件管理器下载到您的电脑
预览图像

目前上传文件没有验证，也没有配置文件...

许多其他功能正在计划中...这是一个开发版本。

composer require webzille/filemanager

在要求包之后，您需要创建一个符号链接到文件管理器将上传文件的位置

php artisan storage:link

并且需要发布公开文件以加载 CSS 文件

php artisan vendor:publish --tag=filemanager_public

以下是使用 SimpleMDE 实现文件管理器的说明，但您可以使用任何您选择的编辑器。唯一的不同之处在于如何向编辑器添加自定义按钮以及如何将生成的 markdown/html 添加到编辑器。

在 SimpleMDE 中，在您的按钮列表中，您将创建一个自定义按钮，该按钮将打开文件管理器并将选定的文件（图像）传递给一个生成 markdown 的函数。

{
    name: "internal-image",
    action: function openFileManager(editor) {
        fileManagerWindow('image').then(function(selectedFiles) {
            var markdownContent = generateMarkdown(selectedFiles);

            editor.codemirror.replaceSelection(markdownContent);
        });
    },
    className: "fa fa-file",
    title: "File Manager",
},

fileManagerWindow(arg) 是打开文件管理器的新窗口并设置环境为 image（或传递给它的任何其他内容）的函数。

function fileManagerWindow(type) {
    var fileManagerRoute = '{{ route('filemanager', ':type') }}';
    var fileManagerWindow = window.open(
        fileManagerRoute.replace(':type', type),
        'FileManager',
        'resizable=true,scrollbars=true,fullscreen=true'
    );

    return new Promise(function(resolve, reject) {
        window.addEventListener('beforeunload', function() {
            var selectedFiles = fileManagerWindow.selectedFiles;
            resolve(selectedFiles);
        });

        window.addEventListener('message', function(event) {
            if (event.source === fileManagerWindow) {
                var selectedFiles = event.data;
                resolve(selectedFiles);
            }
        });
    });
}

自定义按钮调用的生成 markdown 的函数是

function generateMarkdown(selectedFiles) {
    var markdownContent = selectedFiles.map(function(file) {
        return '![' + file + '](' + file + ')';
    }).join('\n');

    return markdownContent;
}

您可以通过向按钮/输入字段或任何您可能想要的元素添加事件监听器并在处理返回的文件来在编辑器之外使用此文件管理器。以下是一个示例，通过将事件监听器设置在具有 id 为 'post-image' 的输入文本字段中来在元素中设置图像预览。

const postImage = document.getElementById('post-image');

// Attach event listener for click and focus events
postImage.addEventListener('click', handleImageSelection);
postImage.addEventListener('focus', handleImageSelection);

function handleImageSelection() {
    fileManagerWindow('image').then(function(selectedFiles) {
        // We only use one image for the post. Using the first regardless of how many images returned.
        setImagePreview(selectedFiles[0]);
    });

    postImage.blur();
}

function setImagePreview(image) {
    postImage.value = image;

    // The DIV the image will be set as a background image to.
    const postImagePreview = document.getElementById('post-image-preview');

    postImagePreview.style.visibility = 'visible';
    postImagePreview.style.backgroundImage = 'url(' + image + ')';

    const postImagePreviewClose = document.getElementById('post-image-preview-close');

    postImagePreviewClose.style.visibility = 'visible';
}

webzille /

维护者

详细信息

README