独立按钮 laravel 文件管理器答案

【问题标题】：Standalone button laravel filemanager独立按钮 laravel 文件管理器
【发布时间】：2021-09-28 19:52:10
【问题描述】：

嗨，我的 laravel 版本是 6 我安装了 Unisharp/laravel-filemanager

我正在尝试将独立按钮用于文件管理器，但出现如下 404 错误： my error

这是我的按钮代码：

<div class="input-group">
<span class="input-group-btn">
<a href="#" id="lfm" data-input="image" data-preview="holder" class="btn btn-primary">
<i class="fa fa-picture-o"></i> Choose
</a>
</span>
<input id="image" class="form-control" type="text" name="image">
</div>
<img id="holder" style="margin-top:15px;max-height:100px;">

我的脚本在这里：

    <script src="/vendor/laravel-filemanager/js/stand-alone-button.js"></script>
  <script>
      {!! \File::get(base_path('vendor/unisharp/laravel-filemanager/public/js/filemanager.js'))  !!};
      var route_prefix = "laravel-filemanager";
      $('#lfm').filemanager('image', {prefix: route_prefix});
  </script>

我的路线在这里：

Route::prefix('laravel-filemanager')->middleware('web','auth')->group(function (){
    \UniSharp\LaravelFilemanager\Lfm::routes();
});

请帮助我并为我编写真正的代码谢谢

【问题讨论】：

标签： php laravel laravel-6 file-manager unisharp-file-manager

【解决方案1】：

要使用独立按钮 laravel 文件管理器，您必须根据 doc 将 Jquery.js 添加到您的页面中

将jquery添加到head标签中

这是我的 index.blade.php 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

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

    <!--=== Tiny MCE SCRIPT === -->
    <script src="{{ asset('js/tinymce.min.js') }}"></script>
    <script>
        var editor_config = {
            path_absolute: "/",
            selector: 'textarea#editor',
            relative_urls: false,
            directionality: 'rtl',
            plugins: [
                "advlist autolink lists link image charmap print preview hr anchor pagebreak",
                "searchreplace wordcount visualblocks visualchars code fullscreen",
                "insertdatetime media nonbreaking save table directionality",
                "emoticons template paste textpattern"
            ],
            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | rtl ltr",
            file_picker_callback: function (callback, value, meta) {
                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 + 'laravel-filemanager?editor=' + meta.fieldname;
                if (meta.filetype == 'image') {
                    cmsURL = cmsURL + "&type=Images";
                } else {
                    cmsURL = cmsURL + "&type=Files";
                }

                tinyMCE.activeEditor.windowManager.openUrl({
                    url: cmsURL,
                    title: 'Filemanager',
                    width: x * 0.8,
                    height: y * 0.8,
                    resizable: "yes",
                    close_previous: "no",
                    onMessage: (api, message) => {
                        callback(message.content);
                    }
                });
            }
        };

        tinymce.init(editor_config);
    </script>

    
//load jquery v3.6 (* its important)
    <script src="https://code.jquery.com/jquery-3.6.0.js"
            integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

//load stand-alone-button
    <script src="/vendor/laravel-filemanager/js/stand-alone-button.js"></script>

    <title>test tiny mce editor with image and file upload</title>
</head>
<body>

<textarea id="editor"></textarea>

<hr>

<div class="input-group">
   <span class="input-group-btn">
     <a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-primary">
       <i class="fa fa-picture-o"></i> Choose
     </a>
   </span>
    <input id="thumbnail" class="form-control" type="text" name="filepath">
</div>
<img id="holder" style="margin-top:15px;max-height:100px;">


<script>
    var route_prefix = "laravel-filemanager";
    $('#lfm').filemanager('image', {prefix: route_prefix});
</script>


</body>
</html>

【讨论】：

【解决方案2】：

更改你的脚本：

<script>
var route_prefix = "/filemanager";</script>



<script>
{!! \File::get(base_path('vendor/unisharp/laravel-filemanager/public/js/stand-alone-button.js')) !!}</script>



<script>
$('#lfm').filemanager('image', {prefix: route_prefix});
$('#lfm').filemanager('file', {prefix: route_prefix});</script>

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。