CKEditor集成CKFinder 3实现多文件添加至链接对话框的方法

我刚好之前处理过类似的需求，给你分享一套可行的实现步骤，核心是调整CKFinder的多选配置和CKEditor的回调逻辑：

1. 启用CKFinder的多选模式 #

首先确保CKFinder允许用户选择多个文件，在CKFinder的前端配置文件（ckfinder/config.js）里添加或修改以下配置：

CKFinder.setupCKEditor(null, {
    selectMultiple: true, // 开启多选功能
    chooseFiles: true
});

如果是通过独立模态框调用CKFinder，也要在调用参数里加上selectMultiple: true，后面会提到具体用法。

2. 修改CKEditor链接对话框的回调逻辑 #

默认的CKEditor链接对话框调用CKFinder后只处理单个文件，我们需要重写这个回调，让它能处理多个选中的文件。

针对CKEditor 4.x的实现 #

在CKEditor的配置文件（config.js）里添加以下代码：

CKEDITOR.on('dialogDefinition', function(ev) {
    const dialogName = ev.data.name;
    const dialogDefinition = ev.data.definition;
    const editor = ev.editor;

    // 只针对链接对话框做修改
    if (dialogName === 'link') {
        const infoTab = dialogDefinition.getContents('info');
        const browseBtn = infoTab.get('browse');

        // 重写浏览按钮的点击事件逻辑
        browseBtn.onClick = function() {
            CKFinder.modal({
                chooseFiles: true,
                selectMultiple: true,
                onInit: function(finder) {
                    // 监听文件选中完成的事件
                    finder.on('files:choose', function(evt) {
                        const selectedFiles = evt.data.files;
                        let linksHtml = '';

                        // 循环处理每个选中的文件，生成对应的链接HTML
                        selectedFiles.forEach(file => {
                            const fileUrl = file.getUrl();
                            const fileName = file.get('name');
                            // 这里可以自定义链接的属性，比如添加target="_blank"
                            linksHtml += `<a href="${fileUrl}" target="_blank">${fileName}</a> `;
                        });

                        // 将生成的多个链接插入到编辑器内容中
                        editor.insertHtml(linksHtml.trim());
                        // 关闭CKFinder模态框和链接对话框
                        CKFinder.modal.close();
                        editor.getDialog('link').hide();
                    });
                }
            });
        };
    }
});

针对CKEditor 5的实现 #

如果用的是CKEditor 5，逻辑类似但API有所不同，示例代码如下：

import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
import Link from '@ckeditor/ckeditor5-link/src/link';

ClassicEditor
    .create(document.querySelector('#editor'), {
        plugins: [CKFinder, Link],
        ckfinder: {
            uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
            // 启用多选配置
            options: {
                selectMultiple: true
            }
        },
        link: {
            addTargetToExternalLinks: true
        }
    })
    .then(editor => {
        // 监听CKFinder的文件选中事件
        editor.plugins.get('CKFinder').on('files:choose', (evt) => {
            const selectedFiles = evt.data.files;
            const links = selectedFiles.map(file => {
                return `<a href="${file.getUrl()}" target="_blank">${file.get('name')}</a>`;
            }).join(' ');
            
            editor.model.change(writer => {
                const viewFragment = editor.data.processor.toView(links);
                const modelFragment = editor.data.toModel(viewFragment);
                editor.model.insertContent(modelFragment);
            });
        });
    })
    .catch(error => {
        console.error(error);
    });

3. 额外注意事项 #

• 确保CKFinder后端配置（比如config.php）没有禁用多选，默认是允许的，若有自定义修改需检查$config['enabled']和相关权限设置。
• 可以根据需求自定义链接的样式、文本内容，比如让用户输入统一的链接文本，或者保留文件名作为链接显示内容。
• 测试时要确认CKEditor和CKFinder的版本兼容，CKEditor 4.x搭配CKFinder 3.x、CKEditor 5搭配CKFinder 3.x/4.x都是可行的组合。

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