标签: ckeditor5-react

我正在使用 reactjs 和 ckeditor5-react。我正在浏览标准文件以使用简单上传适配器 https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html

但它因以下错误而失败：

CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
? 2 stack frames were collapsed.
__webpack_require__
D:/Projects/nodejs/node-react-firebase-flashcards/firecards/webpack/bootstrap:785
  782 | };
  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;

package.json - 相关部分：

  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^12.0.0",
    "@ckeditor/ckeditor5-react": "^1.1.3",
    "@ckeditor/ckeditor5-upload": "^12.0.0",

我的进口

import React, { Component } from "react"; …

如何在 React 中使用 ImageResize。我找不到任何样本。我想调整我从 CKEditor 添加到我的反应组件上的图像的大小。

<CKEditor editor={ClassicEditor}
      data="<p>Hello from CKEditor 5!</p>"
      onInit={editor => {
        editor.plugins.get(
          "FileRepository"
        ).createUploadAdapter = loader => {
          return new UploadAdapter(loader)
        }

        //editor.plugins.add("ImageResize") or something?

        console.log("Editor is ready to use!", editor)
      }}
      onChange={(event, editor) => {
        const data = editor.getData()
        console.log({ event, editor, data })
      }}
      onBlur={(event, editor) => {
        console.log("Blur.", editor)
      }}
      onFocus={(event, editor) => {
        console.log("Focus.", editor)
      }}
/>

我正在尝试在 NextJS 中使用 CKEditor5。这是我的软件包版本：

"@ckeditor/ckeditor5-build-classic": "^22.0.0",
"@ckeditor/ckeditor5-code-block": "^22.0.0",
"@ckeditor/ckeditor5-react": "^2.1.0",
"next": "9.5.1",

我的组件的相关部分是：

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';

const editorConfig = {
  toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'codeBlock'],
  plugins: [CodeBlock],
  codeBlock: {
    languages: [
      { language: 'plaintext', label: 'Plain text' },
      { language: 'c', label: 'C' },
      { language: 'cs', label: 'C#' },
      { language: 'cpp', label: 'C++' },
      { language: 'css', label: 'CSS' },
      { language: 'diff', label: …

在过去的几个月里，我一直在使用 Create React App 构建我的应用程序。

但是，Ionic 现在支持 Vite，我正在尝试将我的应用程序从 CRA 迁移到 Vite。

最初，我制作了一个CKEditor 5 Custom Build并将其设置在 React 应用程序中，如下所示：

import React from 'react';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore  Ckeditor does not supply TypeScript typings.
import { CKEditor } from '@ckeditor/ckeditor5-react';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore  Ckeditor does not supply TypeScript typings.
import Editor from 'ckeditor5-custom-build/build/ckeditor';

在构建我的应用程序之前，我构建了自定义 CKEditor，如下所示：

cd ckeditor5; npm run build

CKEditor 构建命令是webpack --mode production.

现在，配置完Vite后，当我运行时npm run build，出现以下错误：

'default' 不是由 ckeditor5/build/ckeditor.js 导出，而是由 src/components/contentTypeCard/CKEditorInput.tsx 导入

CKEditor …