如何在Summernote富文本编辑器中集成Roxy Fileman图片管理器？

看起来你已经走对了方向——自定义按钮的思路完全没问题，只是在弹窗调用和回调逻辑上需要调整下。Summernote确实没有专门的自定义弹窗API，但我们可以用原生弹窗或者模态框来加载Roxy Fileman，再通过回调把选中的图片插入到编辑器里。下面给你具体的实现步骤：

第一步：完善自定义按钮的点击逻辑 #

先把你写的按钮代码调整得更清晰，直接关联弹窗打开函数：

// 自定义Roxy Fileman按钮
var RoxyButton = function (context) {
  var ui = $.summernote.ui;

  // 创建按钮
  var button = ui.button({
    contents: '<i class="fa fa-child"></i>',
    tooltip: '插入图片',
    click: function() {
      // 点击按钮时打开Roxy Fileman弹窗，传入当前编辑器上下文
      openRoxyFileman(context);
    }
  });

  return button.render(); // 返回按钮的jQuery对象
}

第二步：实现弹窗打开与图片插入回调 #

这里提供两种常用的方案，你可以根据项目情况选择：

方案1：使用原生弹窗（简单直接）

这种方式不需要额外依赖，直接用window.open打开Roxy Fileman，通过全局回调函数接收图片URL：

function openRoxyFileman(context) {
  // 定义全局回调函数，Roxy Fileman选择图片后会调用它
  window.insertImageFromRoxy = function(imageUrl) {
    // 调用Summernote的API插入图片到编辑器
    context.invoke('editor.insertImage', imageUrl);
    // 关闭弹窗
    roxyWindow.close();
    // 清理全局函数（可选）
    delete window.insertImageFromRoxy;
  };

  // 拼接Roxy Fileman的访问地址，指定回调函数和图片类型
  var roxyFilemanUrl = '@Url.Content("~/lib/Roxy_Fileman/index.html")?type=image&func=insertImageFromRoxy';
  // 打开弹窗
  var roxyWindow = window.open(roxyFilemanUrl, 'RoxyFileman', 'width=850,height=650,scrollbars=yes');
}

方案2：嵌入到Bootstrap模态框（风格统一）

如果你的项目用了Bootstrap，可以把Roxy Fileman放到模态框里，通过postMessage传递图片URL（更优雅，避免全局函数）：

function openRoxyFileman(context) {
  // 创建Bootstrap模态框的HTML
  var modalHtml = `
    <div class="modal fade" id="roxyImageModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">选择图片</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body p-0">
            <iframe src="@Url.Content("~/lib/Roxy_Fileman/index.html")?type=image" frameborder="0" width="100%" height="550"></iframe>
          </div>
        </div>
      </div>
    </div>
  `;
  // 添加模态框到页面
  $('body').append(modalHtml);

  // 监听iframe发送的消息
  window.addEventListener('message', function(event) {
    // 验证消息来源（可选，增强安全性）
    if (event.origin !== window.location.origin) return;
    
    // 接收Roxy Fileman传来的图片URL
    if (event.data?.type === 'roxyImageSelected') {
      context.invoke('editor.insertImage', event.data.url);
      // 关闭并移除模态框
      $('#roxyImageModal').modal('hide');
      $('#roxyImageModal').remove();
    }
  });

  // 显示模态框
  $('#roxyImageModal').modal('show');
}

⚠️ 用这个方案需要先在Roxy Fileman的conf.json里开启postMessage支持，添加配置："postMessage": true

第三步：保持Summernote的配置不变 #

你原来的toolbar和buttons配置是正确的，直接保留即可：

toolbar: [
  ['mybutton', ['roxy']],
],
buttons: {
    roxy: RoxyButton
},

关键注意点 #

• 确保@Url.Content("~/lib/Roxy_Fileman/index.html")生成的路径是正确的，能正常访问到Roxy Fileman的页面
• 如果用方案1，全局回调函数要确保在Roxy Fileman的页面能访问到（不要放在局部作用域里）
• 测试时注意跨域问题，如果Roxy Fileman和你的项目不在同一域名下，需要额外配置跨域许可

备注：内容来源于stack exchange，提问作者DmitriyKulagin