ReferenceError：使用 CKEditor 时未定义 self

Question

ReferenceError：导入 CKEditor 时未定义 self。我正在使用 next.js。

import { CKEditor } from '@ckeditor/ckeditor5-react';

已经安装使用

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

Answer 1

经过一番尝试和错误后，我终于使它可以使用此设置（NextJS 项目）。无需更改 webpack 配置。如何处理输入数据取决于您。

-MyEditor.jsx

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

const Editor = ({
  value,
  onChange,
}) => {
  return (
    <CKEditor
      editor={ClassicEditor}
      data={value}
      onChange={(event, editor) => {
        const data = editor.getData();
        onChange(data);
      }}
    />
  );
};

export default Editor;

- 在任何其他组件中：

import dynamic from "next/dynamic";

const MyComp = () => {
   const Editor = dynamic(() => import("./MyEditor"), { ssr: false });
   return (
     <Editor            
        value={"Foo"}
        onChange={(v) => console.log(v)}
     />
)};