如何通过OpenCart文件管理器在CKEditor中浏览/插入图片？

1. 配置CKEditor文件浏览器路径 #

找到你的CKEditor配置文件（通常是ckeditor/config.js），添加以下配置，让CKEditor调用OpenCart的文件管理器，同时带上管理员会话的user_token做权限验证：

CKEDITOR.editorConfig = function( config ) {
    // 保留原有其他配置
    config.filebrowserImageBrowseUrl = 'index.php?route=common/filemanager&user_token=' + getOpencartToken();
    config.filebrowserImageUploadUrl = 'index.php?route=common/filemanager/upload&user_token=' + getOpencartToken();
    config.filebrowserBrowseUrl = 'index.php?route=common/filemanager&user_token=' + getOpencartToken();
};

// 从页面隐藏字段获取OpenCart的user_token
function getOpencartToken() {
    return document.querySelector('input[name="user_token"]')?.value || '';
}

2. 适配OpenCart文件管理器返回格式给CKEditor #

OpenCart默认的文件管理器返回格式需要调整，才能被CKEditor正确识别。修改admin/controller/common/filemanager.php，在index方法中添加CKEditor专属的返回逻辑：

// 找到原有返回JSON的位置，替换为：
if (isset($this->request->get['CKEditor'])) {
    // CKEditor期望的上传返回格式
    $this->response->setOutput(json_encode([
        'uploaded' => 1,
        'fileName' => basename($this->request->files['upload']['name']),
        'url' => $this->model_tool_image->resize(basename($this->request->files['upload']['name']), 1000, 1000)
    ]));
} else {
    // 保留原有的文件管理器列表返回逻辑
    $this->response->setOutput(json_encode($data));
}

同时修改文件管理器的视图admin/view/template/common/filemanager.tpl，添加选择图片后返回CKEditor的逻辑：

// 替换原有图片点击事件的代码
$('.file-item').on('click', function() {
    const imageUrl = $(this).data('url');
    const editorName = window.location.search.match(/CKEditor=([^&]+)/)?.[1];
    
    if (window.opener && editorName && window.opener.CKEDITOR.instances[editorName]) {
        const editor = window.opener.CKEDITOR.instances[editorName];
        editor.insertHtml(`<img src="${imageUrl}" alt="" />`);
        window.close();
    } else {
        // 保留原有的商品图片选择逻辑
        $('#input-image').val(imageUrl);
        $('#image-preview').html(`<img src="${imageUrl}" alt="" />`);
        $('#modal-image').modal('hide');
    }
});

3. 初始化CKEditor时传递实例标识 #

在需要使用CKEditor的页面（比如商品编辑页admin/view/template/catalog/product_form.tpl），初始化编辑器时明确传递实例名，确保文件管理器能正确返回：

CKEDITOR.replace('description', {
    filebrowserImageBrowseUrl: `index.php?route=common/filemanager&user_token=${getOpencartToken()}&CKEditor=description`
});

4. 确认权限验证 #

确保文件管理器的权限检查正常，admin/controller/common/filemanager.php开头的权限验证要保留：

if (!$this->user->hasPermission('access', 'common/filemanager')) {
    $this->response->redirect($this->url->link('error/permission', 'user_token=' . $this->session->data['user_token'], true));
}

完成以上配置后，点击CKEditor的图片插入按钮，会弹出OpenCart的文件管理器，选择图片后即可自动插入到编辑器中。

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