独立 CKFinder：如何仅在文件对话框弹出窗口中选择图像？

Posted 2023-02-25

【中文标题】独立 CKFinder：如何仅在文件对话框弹出窗口中选择图像？

【英文标题】：Standalone CKFinder: how to only select images in file dialog popup?

【发布时间】：2013-07-17 20:13:30

【问题描述】：

我将 CKFinder 与 CKEditor 结合使用，但也用作独立的文件输入图像弹出窗口。因此，当有人单击“上传”按钮时，会出现一个新的弹出窗口，其中有人可以选择要上传的图像/文件/Flash 文件。 对于“头像”字段，我只需要选择图像文件。不应该选择其他文件类型。我怎样才能得到这个工作？在文档中我找不到非常有用的信息。

在 CKEditor 中，只能从 CKFinder 弹出窗口中选择图像或文件，但在独立版本的 CKFinder 中似乎忘记了相同的选项。 我需要实现“ckfinder.html?type=Image”，但我不想修改 ckfinder.js，因为这也会影响其他文件弹出对话框，其中有人应该能够选择甚至图像作为文件。

我在弹出示例中包含了 CKFinder：

var finder = new CKFinder();
finder.basePath = '../';    // The path for the installation of CKFinder (default = "/ckfinder/").
finder.selectActionFunction = SetFileField;
finder.popup();

提前感谢您的帮助！

【问题讨论】：

这个问题有点难以理解，但我认为你想要一个只允许图像的连接器配置。现在我正在评估 CKFinder 的使用情况，我实际上有两个 CKFinder 设置。这非常烦人，但我不知道如何在连接器配置之间动态选择。

【参考方案1】：

你应该试试， *

加载图像

是按钮选择文件的id，

图片网址

是文本链接的id

$('#LoadImage').click(function () 
    var finder = new CKFinder();
    finder.selectActionFunction = function (fileUrl) 
        fileUrl = fileUrl.substring(fileUrl.lastIndexOf("/") + 1);
        $('#picUrl').val = (fileUrl);
    
    selectFileWithCKFinder('picUrl');
)
function selectFileWithCKFinder(elementId) 
    CKFinder.popup(
        chooseFiles: true,
        width: 800,
        height: 600,
        onInit: function (finder) 
            finder.on('files:choose', function (evt) 
                var file = evt.data.files.first();
                var output = document.getElementById(elementId);
                output.value = file.getUrl();
            );

            finder.on('file:choose:resizedImage', function (evt) 
                var output = document.getElementById(elementId);
                output.value = evt.data.resizedUrl;
            );
        
    );