如何使用 CKEditor5 和 CKFinder 和 REACT 获取“CKEditorFuncNum”获取参数？

问题描述

我真的已经走到尽头了——只是我的固执不会让我放弃。我已经花了几个小时在这上面，但我无法使用 CKFinder 上传到 ckeditor5。

我已经阅读了几篇 Stackoverflow 帖子，最引人注目的是这里以及嵌入的线程/链接： CKEditor,Image Upload (filebrowserUploadUrl)

不幸的是，这并没有解决我遇到的问题——也许 b/c 我此时睡眠不足。我只是无法理解发生了什么，因为这看起来很简单！

编辑器加载没有问题。一切都很好。

当我点击图片图标上传图片时，会出现一个对话框，可以选择图片。

图像被上传到我的服务器，甚至被保存到适当的位置。

但是无论发生什么，CKEditor 都会报告“无法上传文件”。没有进一步的信息。提供并且没有服务器或客户端控制台错误。

客户端 URL 也能完美运行，因此您可以点击它查看图像。

我怀疑问题是“CKEditorFuncNum”获取参数。一个不是从 CKEditor 发送到服务器。我试图用 1 英寸代替它（作为最后的手段）但无济于事。 *这里的一个线程中提到了这一点，因为它主要是正确的值。

任何帮助将不胜感激。我只知道这是我遗漏的一些简单的东西。

客户端/反应代码：

import React,{ useState } from "react";

import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

const Editor = () => {
  const [content,setContent] = useState("");

  const editorConfiguration = {
    toolbar: [
      "selectall","undo","redo","bold","italic","blockquote","imagetextalternative","link","ckfinder","uploadimage","imageupload","heading","imagestyle:full","imagestyle:side","indent","outdent","numberedlist","bulletedlist","mediaembed","inserttable","tablecolumn","tablerow","mergetablecells",],};

  return (
    <React.Fragment>
      <div className="container mt-4">
        <div className="row">
          <div className="offset-md-1 col-md-10">
            <CKEditor
              editor={ClassicEditor}
              config={
                (editorConfiguration,{
                  ckfinder: {
                    uploadUrl: "http://127.0.0.1:3001/uploads",},})
              }
              data={"<p>Hello</p>"}
              onReady={(editor) => {
                setContent(editor.getData());
              }}
              onChange={(event,editor) => {
                setContent(editor.getData());
              }}
              onBlur={(event,editor) => {}}
              onFocus={(event,editor) => {}}
            />
          </div>
          <div className="offset-md-1"></div>

          <div className="mt-3 offset-md-1 col-md-10">
            <button
              className="btn btn-success"
              onClick={() => console.log(content)}
            >
              Save
            </button>
          </div>
          <div className="offset-md-1"></div>
        </div>
      </div>
    </React.Fragment>
  );
};

export default Editor;

服务器/nodeJS代码：

const express = require('express');
const app = express();
const cors = require('cors');
const multiparty = require('connect-multiparty');

const port = 3001;

const MultiPartyMiddleware = multiparty({uploadDir:"./uploads"});

app.use(cors('*'));

app.use(express.json());

app.get('/',(req,res) => {
  res.send('Homepage');
});

app.get('/uploads/:img',res) => {
  res.sendFile(`/Users/me/Desktop/prj/uploads/${req.params.img}`);
});

app.post('/uploads',MultiPartyMiddleware,res) => {
  console.log(`<script>window.parent.CKEDITOR.tools.callFunction(1,"http://127.0.0.1:3001/${req.files.upload.path}");</script>`);
  res.send(`<script>window.parent.CKEDITOR.tools.callFunction(1,"http://127.0.0.1:3001/${req.files.upload.path}");</script>`);
});

app.listen(port,() => {
  console.log(`Example app listening at http://localhost:${port}`);
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ckeditor ckeditor ckeditor ckfinder javascript