[英]CKEditor rerenders after every State/ Props Change
currently I am working on a project with Next.js and CKEditor 5. I created an Editor-Component which I want to use on a page.目前我正在使用 Next.js 和 CKEditor 5 开展一个项目。我创建了一个编辑器组件,我想在页面上使用它。 Since I need the value of the input on the parent page, I am using a state and setState as props.
由于我需要父页面上输入的值,因此我使用 state 和 setState 作为道具。
My Code looks like this:我的代码如下所示:
Page:页:
import dynamic from "next/dynamic";
import { useState } from 'react';
export default function Create() {
const Editor = dynamic(() => import("../components/MyEditor"), { ssr: false });
const [text, setText] = useState("")
const handleTextInput = (textInput) => {
setText(textInput)
}
return (
<>
<div key="editor1div">
<Editor key="editor1" handleInput={handleTextInput} data={text} />
</div>
</>
)
}
Editor-Component:编辑器组件:
import Editor from '../../ckeditor5-custom-build/build/ckeditor'
import { CKEditor } from '@ckeditor/ckeditor5-react'
import '../../ckeditor5-custom-build/build/translations/de';
const MyEditor = (props) => {
const editorConfiguration = {
toolbar: {
items: ['bold', 'italic', 'underline', '|', 'undo', 'redo'],
}
};
return (
<>
<CKEditor
editor={Editor}
config={editorConfiguration}
data={props.data}
onChange={(event, editor) => {
props.handleInput(editor.getData())
}}
/>
</>
);
}
export default MyEditor
My Problem: The Editor gets rerendered everytime, a key is hit.我的问题:编辑器每次都会重新渲染,按下一个键。 That means it also loses focus, which leads to a bad user experience.
这意味着它也会失去焦点,从而导致糟糕的用户体验。 As far as I understand, setting a key to the editor should prevent rerendering on every props change, but it did not work.
据我了解,为编辑器设置一个键应该可以防止每次道具更改时重新渲染,但它不起作用。 As suggested in other similar questions, I tried uuid's v4()-Method as key, but also this did not solve the problem.
正如其他类似问题中所建议的那样,我尝试了 uuid 的 v4()-Method 作为键,但这也没有解决问题。
The solution I wish for: In the best case, the editor would not rerender on every new char that is entered and just stay the same.我希望的解决方案:在最好的情况下,编辑器不会在输入的每个新字符上重新渲染,而是保持不变。 Alternatively, if that is not possible, I could also work with a solution in which I manually set the focus to the editor or where the state is not permanently updated, but only on a button click on the Page itself.
或者,如果这不可能,我也可以使用一种解决方案,在该解决方案中,我手动将焦点设置到编辑器,或者 state 不会永久更新,而只是在页面本身上单击按钮。
Did anybody have similar problems or knows a solution?有没有人有类似的问题或知道解决方案?
Kind regards亲切的问候
Robert罗伯特
I found the solution my self.我自己找到了解决方案。 For everybody with similar problems: the reason is the dynamic import inside the component.
对于有类似问题的每个人:原因是组件内部的动态导入。 If the dynamic import is outside the component, it works:
如果动态导入在组件之外,它可以工作:
import dynamic from "next/dynamic";
import { useState } from 'react';
const Editor = dynamic(() => import("../components/MyEditor"), { ssr: false });
export default function Create() {
const [text, setText] = useState("")
const handleTextInput = (textInput) => {
setText(textInput)
}
return (
<>
<div key="editor1div">
<Editor key="editor1" handleInput={handleTextInput} data={text} />
</div>
</>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.