ReferenceError: self在使用CKEditor时没有定义

Question

ReferenceError: self在导入CKEditor时未定义。我正在使用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)}
/>
)};