UniSharp Laravel-Filemanager 集成指南：从编辑器到独立使用

UniSharp Laravel-Filemanager 集成指南：从编辑器到独立使用

laravel-filemanager Media gallery with CKEditor, TinyMCE and Summernote support. Built on Laravel file system. 项目地址: https://gitcode.com/gh_mirrors/la/laravel-filemanager

前言

UniSharp Laravel-Filemanager 是一个功能强大的文件管理解决方案，专为 Laravel 框架设计。它为开发者提供了便捷的文件和图片管理功能，可以轻松集成到各种编辑器和自定义表单中。本文将详细介绍如何将 Filemanager 与不同编辑器集成，以及如何独立使用其功能。

WYSIWYG 编辑器集成

CKEditor 集成方案

CKEditor 是一款流行的富文本编辑器，集成 Filemanager 非常简单：

1. 首先引入 CKEditor 核心文件
2. 配置 Filemanager 相关参数
3. 初始化编辑器

<textarea id="my-editor" name="content" class="form-control">初始内容</textarea>
<script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
<script>
  var options = {
    filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
    filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token={{csrf_token()}}',
    filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
    filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token={{csrf_token()}}'
  };
  CKEDITOR.replace('my-editor', options);
</script>

技术要点：

• filebrowserImageBrowseUrl 配置图片浏览地址
• filebrowserImageUploadUrl 配置图片上传地址
• 记得包含 CSRF 令牌以确保安全性

TinyMCE 集成方案

TinyMCE 有多个版本，这里分别介绍 TinyMCE5 和 TinyMCE4 的集成方式。

TinyMCE5 配置

<script src="/path-to-your-tinymce/tinymce.min.js"></script>
<textarea name="content" class="form-control my-editor">初始内容</textarea>
<script>
  var editor_config = {
    selector: 'textarea.my-editor',
    // ...其他配置...
    file_picker_callback: function(callback, value, meta) {
      // 文件选择器回调逻辑
      var cmsURL = '/laravel-filemanager?editor=' + meta.fieldname;
      if (meta.filetype == 'image') {
        cmsURL += "&type=Images";
      } else {
        cmsURL += "&type=Files";
      }
      // 打开文件管理器窗口
    }
  };
  tinymce.init(editor_config);
</script>

TinyMCE4 配置

TinyMCE4 的配置与 TinyMCE5 类似，主要区别在于回调函数名称：

file_browser_callback: function(field_name, url, type, win) {
  // 回调逻辑
}

版本差异说明：

• TinyMCE5 使用 file_picker_callback
• TinyMCE4 使用 file_browser_callback
• 参数结构也有所不同

Summernote 集成方案

Summernote 是一款轻量级编辑器，集成 Filemanager 需要自定义按钮：

<textarea id="summernote-editor" name="content">初始内容</textarea>
<script>
  $(document).ready(function(){
    // 定义文件管理器打开函数
    var lfm = function(options, cb) {
      var route_prefix = options.prefix || '/laravel-filemanager';
      window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
      window.SetUrl = cb;
    };

    // 自定义按钮
    var LFMButton = function(context) {
      var button = $.summernote.ui.button({
        contents: '<i class="note-icon-picture"></i>',
        tooltip: '使用文件管理器插入图片',
        click: function() {
          lfm({type: 'image'}, function(items) {
            items.forEach(function (item) {
              context.invoke('insertImage', item.url);
            });
          });
        }
      });
      return button.render();
    };

    // 初始化编辑器
    $('#summernote-editor').summernote({
      toolbar: [['popovers', ['lfm']]],
      buttons: { lfm: LFMButton }
    });
  });
</script>

独立按钮使用方案

如果你不需要集成到编辑器中，而是想单独使用 Filemanager 来选择文件或图片，可以按照以下步骤实现：

基础实现

1. 创建 HTML 结构：

<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> 选择图片
    </a>
  </span>
  <input id="thumbnail" class="form-control" type="text" name="filepath">
</div>
<div id="holder" style="margin-top:15px;max-height:100px;"></div>

2. 引入必要的 JavaScript 文件：

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

3. 初始化 Filemanager：

$('#lfm').filemanager('image');  // 用于图片
// 或
$('#lfm').filemanager('file');   // 用于普通文件

高级配置

如果需要自定义前缀（如在 Windows 开发环境下）：

var route_prefix = "自定义前缀";
$('#lfm').filemanager('image', {prefix: route_prefix});

纯 JavaScript 集成方案

如果你不使用 jQuery，可以使用以下纯 JavaScript 方案：

function initFileManager(id, type, options) {
  let button = document.getElementById(id);
  button.addEventListener('click', function() {
    var prefix = options.prefix || '/laravel-filemanager';
    var input = document.getElementById(button.getAttribute('data-input'));
    var preview = document.getElementById(button.getAttribute('data-preview'));
    
    window.open(prefix + '?type=' + type, 'FileManager', 'width=900,height=600');
    window.SetUrl = function(items) {
      // 处理选择的文件
      input.value = items.map(item => item.url).join(',');
      preview.innerHTML = '';
      items.forEach(item => {
        let img = document.createElement('img');
        img.src = item.thumb_url;
        img.style.height = '5rem';
        preview.appendChild(img);
      });
    };
  });
}

// 使用示例
initFileManager('lfm-btn', 'image', {prefix: '/laravel-filemanager'});

嵌入式使用方案

如果你希望将 Filemanager 直接嵌入到页面中，可以使用 iframe 方式：

<iframe src="/laravel-filemanager" 
        style="width: 100%; height: 500px; overflow: hidden; border: none;">
</iframe>

应用场景：

• 创建专门的文件管理页面
• 需要全功能文件管理的后台界面
• 不希望弹出新窗口的情况

最佳实践建议

1. 安全性考虑：

   • 始终包含 CSRF 令牌
   • 限制文件上传类型
   • 设置适当的文件大小限制

2. 性能优化：

   • 按需加载 Filemanager 资源
   • 考虑使用 CDN 加速编辑器资源

3. 用户体验：

   • 为操作添加加载指示器
   • 提供清晰的错误反馈
   • 考虑添加文件上传进度显示

4. 多环境适配：

   • 开发和生产环境使用不同的前缀配置
   • 处理跨域问题（如果适用）

通过以上集成方案，你可以根据项目需求灵活选择最适合的方式将 Filemanager 集成到你的 Laravel 应用中。无论是作为富文本编辑器的扩展，还是作为独立的文件选择器，UniSharp Laravel-Filemanager 都能提供强大的文件管理功能。

laravel-filemanager Media gallery with CKEditor, TinyMCE and Summernote support. Built on Laravel file system. 项目地址: https://gitcode.com/gh_mirrors/la/laravel-filemanager