javascript - CKEditor 使用 NextJS 使用 useState() 显示文本
问题描述
大家,
我正在尝试在我的 NextJS 项目中实现 CKEditor。
但是我有一个问题,我无法显示我在另一个 div 中编写的文本。
每次我总是出错,我是 NextJS 的新手,所以我很难过。
这是我的组件的代码:
import React, {useState, useEffect, useRef} from 'react';
function Article() {
const editorRef = useRef()
const [editorLoader, setEditorLoaded] = useState(false)
const {CKEditor, ClassicEditor} = editorRef.current || {}
const [data, setData] = useState('')
useEffect(() => {
editorRef.current = {
CKEditor: require('@ckeditor/ckeditor5-react'),
ClassicEditor: require('@ckeditor/ckeditor5-build-classic')
}
setEditorLoaded(true)
}, [])
function onEditorChange(evt) {
setData(evt.editor.getData())
}
return editorLoader ? (
<div>
<p style={{display: 'block'}}>{data}</p>
<CKEditor
editor={ClassicEditor}
data={data}
onChange={onEditorChange}
/>
</div>
) : (
<div>Chargement...</div>
)
}
export default Article
以及每次尝试更改文本时都会遇到的错误:
CKEditorError: Cannot read property 'getData' of undefined
onEditorChange [as onChange]
./components/news/Article.js:20
17 |
18 |
19 | function onEditorChange(evt) {
> 20 | setData(evt.editor.getData())
| ^ 21 | }
22 |
23 |
解决方案
CKEditor 组件在onChange属性中接收一个具有 2 个参数的函数——事件和编辑器:
<CKEditor
...
onChange={(event, editor) => ...}
因此,您可以编写 onEditorChange 函数,例如:
function onEditorChange(event, editor) {
setData(editor.getData())
}
CKEditor 的官方文档
推荐阅读
- java - 我应该使用什么循环?
- node.js - 创建具有给定 mime 类型的随机流
- python - 如何将 ms 中的时间戳转换为 YY-MM-DD 格式?
- c++ - 我可以在 C++ 的子类中将父的 const 成员转换为非常量吗?
- flutter - 输入'未来
' 不是类型 'FutureOr 的子类型 ' 在尝试在颤动中检索蓝牙状态时进行类型转换 - javascript - 输入类型文件未在 IOS Safari 中在 navigation.getCurrentLocations 成功回调中打开
- reactjs - React 将状态值发送到另一个组件
- reactjs - 在 React 中渲染长选择时出现巨大的冻结
- python - 处理大型数据集时 IPython 内核重新启动
- java - 为什么我不能重载这个方法?