如何解决如何从React Js中的文本编辑器获取值? [附摘要]
我正在制作一个简单的应用程序,该应用程序可以生成JSON表单,并且已经将基本详细信息和工作详细信息分为两个部分。
“基本详细信息”部分有两个输入,例如“名字”和“姓氏”。
现在我被要求实施Profile Summary控件,该控件应该是文本编辑器,并且输入的值需要以JSON格式存储。
形成JSON的文件:https://codesandbox.io/s/nextjs-css-only-carousel-forked-8grpo?file=/components/form_context.js
{
basicDetails: {
firstName: "",lastName: "",profileSummary: "" --------> This is where I need to fetch the text editor entered values
},companyDetails: [
{
companyName: "",designation: "",startDate: ""
}
]
}
文本编辑器文件:https://codesandbox.io/s/nextjs-css-only-carousel-forked-8grpo?file=/components/text_editor.js
要求:
要求是文本编辑器值需要存储在JSON格式内。
例如:如果文本是在编辑器中制成的bold
或bullet list
,则需要将键profileSummary
的值与相应的标记相加。
我正在尝试实现文本编辑器字段值,如下所示:https://www.ippy.io/
当我尝试构建类似结构的简历时,无法理解我该如何将文本编辑器值转换为JSON键profileSummary
。
完整的工作示例:
https://codesandbox.io/s/nextjs-css-only-carousel-forked-8grpo
非常感谢您的帮助。
解决方法
每次更改editorState
时,您都需要获取其纯HTML等效项并将其传递给BasicDetails
组件。
onEditorStateChange = (editorState) => {
// console.log(editorState);
this.setState({ editorState },() => {
// state updated
// convert editorState to plain HTML
const contentRaw = convertToRaw(editorState.getCurrentContent());
const contentHTML = draftToHtml(contentRaw);
const fakeEvent = {
target: {
name: this.props.name,value: contentHTML
}
};
// call onChange function from Parent passing the
// fakeEvent object
this.props.onChange(fakeEvent);
});
};
在您的BasicDetails
上,您将onChange
和name
属性传递给EditorContainer
组件。
...
<EditorContainer
name="profileSummary"
onChange={(event) => handleInputChange(event)}
/>
不幸的是,draft-js
库中未内置将DraftJS Editor内容转换为纯HTML的功能,实际上它们仅支持以下用于数据转换的功能
因此您需要使用另一个库,在上面的代码中,我正在使用draftjs-to-html
-创建react-draft-wysiwyg
的人。
编辑我们可以通过检查profileSummary
是否包含一些文本来避免将p
设置为空editorState
标签。
this.setState({ editorState },() => {
const currentContent = editorState.getCurrentContent();
const contentRaw = convertToRaw(currentContent);
const value = currentContent.hasText() ? draftToHtml(contentRaw) : "";
const fakeEvent = {
target: {
name: this.props.name,value
}
};
this.props.onChange(fakeEvent);
});
,
您需要在BasicDetails中编写一个功能<style name="ClickableView">
<item name="colorControlHighlight">@android:color/white</item>
<item name="android:background">?selectableItemBackground</item>
</style>
。
然后
hangleEditorChange
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。