如何解决Draft.js 标头未正确呈现
我有一个安装了顺风的 next.js 环境和一个简单的 Draft.js 文本编辑器。在我的工具栏组件中,我切换内联样式和块样式。一切正常,除了当我将块类型设置为标题一、标题二等时,没有任何内容呈现。我记录了编辑器状态,并且块类型已正确设置为块,但没有任何反应。疯狂的是,它适用于 unordered-list-item 和ordered-list-item。
为了简单起见,我添加了一个应该可以工作但没有的测试按钮。非常感谢任何让我走上正轨的帮助!
export default function TextEditor({data}) {
const [blockData,setBlockData] = React.useState(data)
const rawContent = data.textBlockText
const [editorState,setEditorState] = React.useState(
() => rawContent? EditorState.createWithContent(convertFromraw(JSON.parse(rawContent))) : EditorState.createEmpty(),);
const handleFormatChange = (event) =>{
setEditorState(RichUtils.toggleBlockType(editorState,"header-one"))
}
return (
<div className="h-full">
<div className="w-full py-4 flex flex-row px-8">
<Toolbar editorState={ editorState } setEditorState={ setEditorState } />
</div>
<div className="w-full p-4 border-gray-500 border-2 mt-10 lg:w-1/2 lg:mx-auto">
<Editor
editorState = {editorState}
onChange = {setEditorState}
/>
</div>
<button onClick={e => handleFormatChange ("header-one")}>Test Button</button>
</div>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。