需要帮助在 MERN 堆栈应用程序中通过 CKEditor5 上传图像

Question

我之前见过几个人问过这个问题，但没有人遇到我遇到的问题。

我已经在我的网络应用程序中使用 CKEditor 一段时间了，没有出现任何问题，但我最近注意到图像上传不起作用。当我尝试上传时，我在浏览器中收到此错误：

filerepository-no-upload-adapter 
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-filerepository-no-upload-adapter

所以我去检查了文档，然后继续 npm 安装了@ckeditor/ckeditor5-upload。

因此，我导入了简单上传适配器：

import { SimpleUploadAdapter } from '@ckeditor/ckeditor5-upload';

我的编辑：

<CKEditor
              editor={ClassicEditor}
              data={initialData}
              plugins={[ SimpleUploadAdapter]}
              config={{
                simpleUpload: {
                  uploadUrl: `${process.env.REACT_APP_API_URL_LOCAL}/api/images/upload`
                }
              }}
              // etc etc

如果你好奇，我正在尝试使用我的后端控制器将图像上传到 Cloudinary：

exports.uploadImage = async (req, res) => {
  try {
    const result = await new Promise((resolve, reject) => {
      const uploadStream = cloudinary.uploader.upload_stream(
        { resource_type: 'image' },
        (error, result) => {
          if (error) reject(error);
          else resolve(result);
        }
      );

      streamifier.createReadStream(req.file.buffer).pipe(uploadStream);
    });

    // Respond with the URL of the uploaded image
    res.json({ default: result.url });
  } catch (err) {
    console.log("Error uploading image: ", err);
    res.status(500).send(err);
  }
};

我已经测试了这段代码，可以确认那里没有问题。

但是，我面临的问题是在我的客户端编译器中，由 SimpleUploadAdapter 导入引起，其内容如下：

./node_modules/@ckeditor/ckeditor5-ui/theme/components/colorselector/colorselector.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/@ckeditor/ckeditor5-ui/theme/components/colorselector/colorselector.css)
Module not found: Can't resolve './@ckeditor/ckeditor5-ui/theme/mixins/_dir.css' in 'C:\Users\Owner\Documents\Scenario\client\node_modules\@ckeditor\ckeditor5-ui\theme\components\colorselector'

我以前从未遇到过这个问题，并且很困惑该怎么办。为什么 SimpleUploadAdapter 试图查找 _dir.css？当我尝试从 ckeditor5-upload 导入 Base64UploadAdapter 时，我遇到了同样的问题。

我尝试删除我的 package-lock.json 和 node_modules 文件夹，并重新安装所有包（只是为了确保安装时没有任何内容损坏），但这根本没有帮助。

附加信息： 我通过 Create React App 创建了我的应用程序，因此我没有 webpack。我需要乱用react-app-rewired来修改底层的webpack配置吗？

另外，这是我的 package.json 中的 ckeditor 版本，以防万一有用：

 "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^39.0.1",
    "@ckeditor/ckeditor5-react": "^6.1.0",
    "@ckeditor/ckeditor5-upload": "^39.0.1",
    //...

最后，由于错误源于 /node_modules/@ckeditor/.../components/colorselector，这是我的节点模块中的 colorselector.css：

/*
 * Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";

.ck.ck-color-selector {
    /* View fragment with color grids. */
    & .ck-color-grids-fragment {
        & .ck-button.ck-color-selector__remove-color,
        & .ck-button.ck-color-selector__color-picker {
            display: flex;
            align-items: center;

            @mixin ck-dir rtl {
                justify-content: flex-start;
            }
        }
    }

    /* View fragment with a color picker. */
    & .ck-color-picker-fragment {
        & .ck.ck-color-selector_action-bar {
            display: flex;
            flex-direction: row;
            justify-content: space-around;

            & .ck-button-save,
            & .ck-button-cancel {
                flex: 1
            }
        }
    }
}

任何帮助将不胜感激 - 我现在有点不知所措，因为大多数在线指南都是针对 PHP 或 Angular 的

Answer 1

弄清楚了：

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { CKFinderUploadAdapter, MediaEmbed } from '@ckeditor/ckeditor5-build-classic';

<CKEditor
    editor={ClassicEditor}
    data={initialData}
    plugins={[CKFinderUploadAdapter, MediaEmbed]}
    config={{
        ckfinder: {
            uploadUrl: `${process.env.REACT_APP_API_URL_LOCAL}/api/images/upload`
        },
        mediaEmbed: {
            elementName: 'iframe',
        }
    }}

//etc