我完全理解你折腾两天没搞定这个问题的挫败感——图片能选但就是显示不出来，确实让人头疼。下面给你一份完整的配置示例，帮你彻底解决这个问题：

首先要明确：默认的CKEditor5 CDN经典版并没有包含图片上传所需的插件，所以我们需要先加载对应的插件，再配置后端上传接口（因为图片必须上传到服务器才能生成可访问的URL，浏览器安全限制不允许直接引用本地文件）。

步骤1：加载必要的资源 #

在HTML里除了加载CKEditor核心，还要加上SimpleUploadAdapter插件（这是最基础的上传插件，适合快速集成）：

<!-- CKEditor5经典版核心 -->
<script src="https://cdn.ckeditor.com/ckeditor5/41.0.0/classic/ckeditor.js"></script>
<!-- 图片上传插件 -->
<script src="https://cdn.ckeditor.com/ckeditor5/41.0.0/classic/simpleuploadadapter.js"></script>

<!-- 编辑器容器 -->
<textarea id="questionMainTextId"></textarea>

步骤2：完整的编辑器配置 #

下面的配置包含了图片上传的核心设置，你只需要替换自己的后端接口地址即可：

ClassicEditor
    .create(document.querySelector('#questionMainTextId'), {
        language: {
            ui: 'fa',
        },
        // 启用上传插件
        plugins: [SimpleUploadAdapter],
        // 确保工具栏包含图片上传按钮
        toolbar: [
            'imageUpload',
            'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'
        ],
        // 核心：配置图片上传接口
        simpleUpload: {
            // 替换成你的后端上传API地址
            uploadUrl: 'https://your-backend-server.com/api/upload-image',
            // 可选：如果后端需要认证，添加请求头
            headers: {
                'X-CSRF-TOKEN': 'your-csrf-token',
                'Authorization': 'Bearer your-auth-token'
            }
        },
        // 可选：配置图片编辑工具栏（比如添加标题、调整样式）
        image: {
            toolbar: [
                'imageTextAlternative',
                'toggleImageCaption',
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side'
            ]
        }
    })
    .catch(error => {
        console.error(error);
    });

步骤3：后端接口要求 #

你的后端需要接收multipart/form-data格式的文件（CKEditor默认用upload作为文件字段名），处理上传后返回一个包含图片URL的JSON响应，格式如下：

{
    "url": "https://your-domain.com/uploads/your-image.jpg"
}

如果后端返回的URL字段不是url（比如data.image_url），可以在配置里添加responseUrlProperty: 'data.image_url'来指定。

常见问题排查 #

• 打开浏览器控制台，查看是否有上传相关的错误（比如404、500、CORS错误）
• 确保后端接口允许你的前端域名跨域访问（如果前后端不在同一域名下）
• 检查后端是否正确处理了文件上传，并返回了有效的可访问URL

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