ReferenceError:使用 CKEditor 时未定义 self [重复]

2024-04-24

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

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

已经安装使用

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

经过一番尝试和错误后,我终于使它可以使用此设置(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)}
     />
)};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ReferenceError:使用 CKEditor 时未定义 self [重复] 的相关文章

  • ReactCSSTransitionGroup 组件WillLeave 未调用

    我尝试使用 ReactCssTransition 但不知何故该事件没有被调用 componentWillLeave 这是我的组件 import React Component from react import TransitionGrou
  • 如何使用Create React App安装React

    嗨 我对反应真的很陌生 我不知道如何实际安装它 也不知道我需要做什么才能在其中编写代码 我下载了node js并且安装了v12 18 3以及NPM 6 14 6 但是每次我尝试在许多网站上提到的create react app安装方法中输入
  • 如何在 React 中测试表单提交?

    我有以下 React 组件 export default class SignUpForm extends React Component doSignupForm event Some API call render return div
  • React PropTypes 与 Flow

    PropTypes 和 Flow 涵盖相似的内容 但使用不同的方法 PropTypes 可以在运行时向您发出警告 这有助于快速找到来自服务器等的格式错误的响应 但是 Flow 似乎是未来 并且具有泛型等概念 是一个非常灵活的解决方案 Nuc
  • 如何仅在 NextJS 站点构建期间使用 getInitialProps?

    当使用 NextJS 构建静态站点时 我想要getInitialProps方法仅在构建步骤期间触发 而不是在客户端上触发 在构建步骤中 NextJS 运行getInitialProps 方法 https nextjs org docs fe
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 如何在 React 组件测试中使用 data-testid 属性?

    我正在对一个简单的反应组件进行组件测试 我想渲染该组件 然后对其进行一些测试 问题是cy get 似乎没有找到基于的组件data testid属性 我用一个简单的方法测试了它div和div能找到就好了 我在检查时也注意到DOM在 cypre
  • React Context 的范围是什么?

    我不清楚在哪里Context可以在 React 应用程序中创建 我可以在组件树中的任何位置创建上下文吗 如果可以 该上下文的范围是否仅限于创建它的子级 或者 Context 本质上是全局的 我可以在文档中的哪里找到这个 案例 我在页面上多次
  • 仅显示某些路由的组件 - React

    我正在 React 中开发一个带有登录界面的网站 该网站显示一个自定义导航组件 但是我不希望它显示在主路线 即登录页面 上 但据我了解 静态组件不会在路线更改时重新呈现 这准确吗 我正在使用 React Router 来处理所有路由 这是我
  • 如何访问另一个 mobx 商店中的 mobx 商店?

    假设以下结构 stores RouterStore js UserStore js index js each of Store jsfiles 是一个 mobx 存储类 包含 observable and action index js只
  • Material-UI 4.8.1 API 更改 - 指定“组件”属性的新方法?

    Edit 这是 4 8 x 的打字错误 升级到 4 9 0 即可解决该问题 上版本4 8 0 以下代码编译并运行良好
  • 如何在 React js 上使用历史记录重定向到另一个页面?

    我在前端使用 Reactjs 并在后端使用 Laravel 开发了一个注册页面 我希望当我单击注册按钮时 它将被重定向到我的登录页面 我的注册组件是 handleSubmit event gt event preventDefault co
  • 将 JavaScript 数组转换为具有属性的数组

    我有一个像这样的数组从服务器返回响应 111 1010 111 1010 1010 我想将其转换为 JavaScript JSON 如下所示 branch 111 branch 1010 branch 111 branch 1010 bra
  • 如何在react-router-dom@v6中使用私有路由

    我想要将私有路由与react router dom v6一起使用 当我尝试应用身份验证条件时 在 App js 中
  • React-Router v5 History.push 不触发组件

    很抱歉朋友们又问这个问题了 我找到了解决这个问题的几个方法 但他们让我很困惑 我只是想问一个优雅的方法来做到这一点 正如你通过标题所理解的 我有一个关于反应路由的问题 让我解释 我有一个按钮 其名称是Login 单击按钮后 我执行了一些逻辑
  • 如何使用 setState 插入 React 的状态数组?

    我正在寻找在反应中修改和数组并在特定索引上插入元素 这就是我的状态 this state arr 我想做的是编译这个arr index random element 反应 js setState 语法 我试图做的是 this setStat
  • 删除旧版本的 create-react-app

    我想使用创建一个新的反应应用程序create react app脚本 我仍然安装了一个不再受支持的全局版本 因此我卸载了全局版本并尝试创建一个新版本 如下所示 npx create react app myapp 然后我得到了一个没有使用模
  • “React”在定义之前就被使用了

    我正在使用 create react app typescript eslint 应用程序 在构建过程中出现这样的错误 Line 1 8 React was used before it was defined typescript esl
  • 从 Flask 运行 NPM 构建

    我有一个 React 前端 我想在与我的 python 后端 API 相同的源上提供服务 我正在尝试使用 Flask 来实现此目的 但我遇到了 Flask 找不到我的静态文件的问题 我的前端构建是用生成的npm run build in s
  • 如何为 React 组件参数创建文字类型?

    我创建了 SelectProps 界面 export interface SelectProps value string options string onChange value any gt void 我创建了反应组件

随机推荐

  • 如何在 WPF 中为用户控件创建用户定义(新)事件?一个小例子

    我有一个UserControl我正在其中使用Canvas 并在该画布中创建一个矩形 我想为该用户控件 画布和矩形 创建一个单击事件 然后我想在主窗口中使用它 问题是 我想为UserControl 怎么做 请展示一些例子或代码 A brief
  • 如果 vbs 脚本崩溃,请重新启动它

    我正在尝试制作一个 vb 脚本 如果它崩溃 它将重新启动另一个 vb 脚本 我搜索了又搜索 但我得到的只是如何重新启动程序 并且由于 vb 脚本是后台进程 因此当您在 Win32 Process 中搜索时它不起作用 这是我的代码 set S
  • 为 ARM 交叉编译 zlib

    我尝试为arm poky linux gnueabi交叉编译zlib 但启动 make 时出现错误 zlib 1 2 11 AR HOST ar CC HOST gcc RANLIB HOST ranlib configure prefix
  • 为什么最好使用 Glib 数据类型(例如 `gint` 而不是 `int`)? [复制]

    这个问题在这里已经有答案了 可能的重复 为什么glib要重新定义类型 https stackoverflow com questions 1819561 why does glib redefine types 在 GTK 2 0 教程中
  • 用于计算机安全的遗传算法[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我正在为大学选择项目 我对遗传算法和计算机安全的结合非常感兴趣 因此我的问题是 是否可以使用GAany计算机安全方面 例如 我正在考虑
  • Chrome 浏览器在从 selenium 加载后立即关闭

    我正在运行一个基本的 python 程序来打开 Chrome 窗口 但是一旦代码执行 该窗口就会在那里停留一秒钟 然后立即关闭 from selenium import webdriver import time browser webdr
  • 如何组合杜松子酒中的路线组? [复制]

    这个问题在这里已经有答案了 我创建了两个不同的组gin具体路由 user and todo在两个不同的包中 我想将它们合并到一个文件中 这是我的userroutes go file package userrouter import git
  • 为复合对象编写比较器以进行二分搜索

    我有一个类和实例列表 看起来像这样 字段名称已更改以保护无辜 专有 public class Bloat public long timeInMilliseconds public long spaceInBytes public long
  • 使用 3DES 和 CBC 损坏的加密数据的前 8 个字节

    我在应用程序中使用 PyCrypto 来加密数据 但由于某种原因 无论我做什么 前 8 个字节 对应于第一个块 都会损坏 gt gt gt from Crypto Cipher import DES3 gt gt gt from Crypt
  • Rust 中的基本树和指针

    我拥有一些 C 语言背景 尝试 学习 Rust 让我对自己的能力产生了质疑 我正在尝试找出如何更改拥有的指针 并且正在努力做到这一点 除了从额外的库中复制之外 我无法弄清楚二叉树上所需的递归 特别是 我不知道如何交换指针分支 虽然使用链表我
  • 在 DNN 模块中执行 .exe

    我试图让我的 DNN 模块 6 1 3 在程序中发生特定条件时启动任何类型的可执行文件 此时我只是尝试让它运行记事本并创建一个文本文件 这就是我现在正在尝试的 ProcessStartInfo pi new ProcessStartInfo
  • SASS:直系后代规则?

    如何在 SASS 中表示直接后代 CSS 规则 Ex body gt div 在文档中似乎找不到它 http sass lang com docs yardoc file SASS REFERENCE html http sass lang
  • 将 Google 自定义搜索添加到 AMP 网站

    我有我的 Google 自定义搜索引擎 GCSE 代码
  • pip + requests.txt:奇怪的行为。不断下载各种版本的pandas

    这是用 pip 和 pandas 观察到的情况 以下是我的要求 txt asgiref 3 3 1 auditlog3 1 0 1 click 7 1 2 auditlog3 dj database url 0 5 0 Django 3 1
  • NSLog 上的 EXC_BAD_ACCESS 没有字符串格式

    我在以下代码行中收到 EXC BAD ACCESS 或 malloc 错误 NSLog Points 这对我来说毫无意义 因为它应该访问字符串常量而不是其他任何东西 通常是 EXC BAD ACCESS 但偶尔会出现以下错误 在同一行 An
  • scanf:内部带有宏(#define 常量)的模板

    我有一些像这样的代码 define MAXSIZE 100 int main char str MAXSIZE 1 scanf 100s str 问题是我仍然有 幻数 100 尽管定义了 MAXSIZE 有没有办法正确地将 MAXSIZE
  • 如何在 Symfony2 控制台命令中设置环境

    希望这是一个简单的问题 在 Symfony2 中运行控制台命令时如何指定使用哪个环境 我创建了一些命令 但是我想在我的临时服务器上的 临时 环境上下文中运行它们 在生产服务器上时在 产品 环境中运行它们 不同的环境定义不同的数据库连接 如何
  • 如何使用 Log4cxx 或 log4j 记录进程 ID

    我正在使用 log4cxx 我的项目 我可以使用 t 标记记录当前线程 id 如何在其中记录进程 id 或 log4j 我正在使用 ConversionPattern 和基于 xml 的配置文件 谢谢 基于以上答案 我将在 log4j 中执
  • 如何修复此警告“useLayoutEffect”相关警告?

    我将 NextJS 与 Material UI 和 Apollo 结合使用 虽然一切正常 但警告没有消失 在我看来 很多 Material UI 组件都在使用使用布局效果React 会发出警告 错误如下 警告 useLayoutEffect
  • ReferenceError:使用 CKEditor 时未定义 self [重复]

    这个问题在这里已经有答案了 ReferenceError 导入 CKEditor 时未定义 self 我正在使用 next js import CKEditor from ckeditor ckeditor5 react 已经安装使用 np