CKEditor4如何实现自动识别file://协议及网络目录并转为链接？

针对你的需求，我之前在企业内部系统中处理过类似场景，通过以下几个步骤可以实现CKEditor4自动识别并转换file://协议、本地路径及网络共享路径为可点击链接：

1. 扩展自动链接正则规则 #

CKEditor4的AutoLink插件默认只识别http/https/ftp协议，你可以通过自定义autolink_urlRegex配置，把file://、Windows本地路径（如C:\docs\file.txt）和网络共享路径（如\\server\share\doc.pdf）加入识别规则：

CKEDITOR.config.autolink_urlRegex = /((https?|ftp|file):\/\/[^\s]+)|([a-zA-Z]:\\[^\s]+)|(\\\\[^\s]+)/gi;

配置后，用户输入或粘贴这些路径时，按下回车/空格会自动转为链接。

2. 处理粘贴内容的路径转换 #

如果用户从Word或其他文档粘贴网络路径，可能需要在粘贴事件中主动解析并转换：

CKEDITOR.on('instanceReady', function(ev) {
    ev.editor.on('paste', function(evt) {
        let data = evt.data.dataValue;
        // 匹配各类路径格式
        const pathRegex = /((https?|ftp|file):\/\/[^\s]+)|([a-zA-Z]:\\[^\s]+)|(\\\\[^\s]+)/gi;
        
        data = data.replace(pathRegex, function(match) {
            let url = match;
            // 转换本地/共享路径为标准file://格式
            if (match.startsWith('\\\\')) {
                // UNC路径转file:////server/share格式
                url = 'file://' + match.replace(/\\/g, '/');
            } else if (match.match(/^[a-zA-Z]:\\/)) {
                // 本地路径转file:///C:/docs/file.txt格式
                url = 'file:///' + match.replace(/\\/g, '/');
            }
            return `<a href="${url}">${match}</a>`;
        });
        
        evt.data.dataValue = data;
    });
});

3. 调整内容过滤规则 #

CKEditor4的默认内容过滤（ACF）可能会移除file://链接，需要允许这类链接通过：

// 方式1：精准允许file://及常规协议的a标签
CKEDITOR.config.allowedContent = {
    a: {
        attributes: ['href', 'target'],
        match: elem => {
            const href = elem.attributes.href;
            return href && (href.startsWith('file://') || href.startsWith('http') || href.startsWith('ftp'));
        }
    },
    // 保留其他默认允许的内容
    $1: true
};

// 方式2：（内部环境推荐）关闭ACF，避免过滤限制
// CKEDITOR.config.allowedContent = true;

4. 浏览器适配注意事项 #

部分浏览器（如Chrome）默认限制file://链接访问本地/网络文件，需要确保企业内部浏览器已开启对应的权限设置（如Chrome可通过启动参数--allow-file-access-from-files调整）。

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