如何在ASP.NET Core 6中配置使用CKFinder 3及集成CKEditor 5

一、配置CKFinder 3（ASP.NET Core 6） #

1. 安装CKFinder专用包 #

通过NuGet安装.NET Core版本的CKFinder.AspNetCore：

• Package Manager控制台：

  Install-Package CKFinder.AspNetCore
  

• .NET CLI：

  dotnet add package CKFinder.AspNetCore
  

2. 配置Program.cs #

在.NET 6的顶级语句模式下，添加CKFinder服务与中间件：

var builder = WebApplication.CreateBuilder(args);

// 注册CKFinder服务，可自定义路由前缀
builder.Services.AddCKFinder(options =>
{
    options.CustomRoute = "ckfinder";
});

// 添加MVC服务（按需配置）
builder.Services.AddControllersWithViews();

var app = builder.Build();

// 启用静态文件支持（CKFinder依赖静态资源访问）
app.UseStaticFiles();

// 挂载CKFinder中间件
app.UseCKFinder();

app.UseRouting();

// 配置授权（CKFinder必须认证后才能访问）
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

3. 配置CKFinder核心参数 #

在项目根目录创建ckfinder/config.json，配置存储、权限等核心规则：

{
  "authentication": {
    "enabled": true,
    "checkAuthentication": "AuthHelper.CheckAccess" // 自定义认证方法
  },
  "licenseKey": "", // 替换为你的官方授权密钥
  "baseUrl": "/ckfinder/userfiles/", // 文件访问的基础URL
  "baseDir": "", // 本地存储路径，留空默认指向wwwroot/ckfinder/userfiles
  "resourceTypes": [
    {
      "name": "Images",
      "directory": "images",
      "maxSize": "5MB",
      "allowedExtensions": ["bmp", "gif", "jpg", "jpeg", "png"],
      "deniedExtensions": []
    },
    {
      "name": "Files",
      "directory": "files",
      "maxSize": "10MB",
      "allowedExtensions": ["pdf", "doc", "docx", "zip"],
      "deniedExtensions": []
    }
  ]
}

4. 实现认证逻辑 #

创建自定义认证辅助类，实现CKFinder的权限校验：

public static class AuthHelper
{
    public static bool CheckAccess()
    {
        // 替换为你的实际认证逻辑，比如判断用户是否登录、是否有权限
        // 示例：return HttpContext.Current.User.Identity.IsAuthenticated;
        return true; // 测试环境可临时返回true，生产环境必须完善
    }
}

二、在CKEditor 5中集成CKFinder并连接后端 #

1. 引入CKEditor 5与CKFinder插件 #

可通过CDN快速引入（或本地安装）：

<!-- CKEditor 5经典版核心 -->
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.2/classic/ckeditor.js"></script>
<!-- CKFinder插件 -->
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.2/classic/translations/zh-cn.js"></script>

2. 初始化编辑器并配置CKFinder上传接口 #

在页面中初始化CKEditor，指定后端CKFinder的快速上传地址：

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

<script>
    ClassicEditor
        .create(document.querySelector('#content-editor'), {
            language: 'zh-cn',
            ckfinder: {
                // 指向ASP.NET Core的CKFinder上传接口
                uploadUrl: '/ckfinder/connector?command=QuickUpload&type=Images&responseType=json'
            },
            toolbar: [
                'ckfinder', 'imageUpload', '|', 'undo', 'redo', '|', 'bold', 'italic', 'link'
            ]
        })
        .catch(error => {
            console.error('编辑器初始化失败:', error);
        });
</script>

3. 跨域场景配置（前后端分离时） #

如果前端与后端域名不同，需在ASP.NET Core中配置CORS：

// 在Program.cs中添加CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFrontend", policy =>
    {
        policy.WithOrigins("http://your-frontend-domain.com") // 替换为前端域名
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

// 在UseRouting之后、UseAuthorization之前启用CORS
app.UseCors("AllowFrontend");

注意事项 #

• 确保wwwroot/ckfinder/userfiles目录存在且具备读写权限，否则文件无法上传。
• 生产环境必须完善认证逻辑，禁止未授权用户访问CKFinder管理界面。
• CKFinder需官方授权密钥才能解锁全部功能，可前往官方平台获取。

内容的提问来源于stack exchange，提问作者Saman Bahrekazemi