React组件富文本编辑器(react-draft-wysiwyg)是一个功能强大的富文本编辑器,但它在获取输入数据方面存在一些限制。由于该编辑器的设计和实现,无法直接从编辑器中获取输入的数据。要解决这个问题,可以通过以下步骤获取数据:
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
state = {
editorState: EditorState.createEmpty(),
};
onEditorStateChange = (editorState) => {
this.setState({
editorState,
});
};
render() {
const { editorState } = this.state;
return (
<Editor
editorState={editorState}
onEditorStateChange={this.onEditorStateChange}
/>
);
}
const { editorState } = this.state;
const contentState = editorState.getCurrentContent();
const rawData = convertToRaw(contentState);
const html = draftToHtml(rawData);
console.log(html);
上述代码将编辑器中的数据转换为HTML格式,并将其输出到控制台。你可以根据需要对数据进行进一步处理,比如保存到数据库或发送到服务器等。
需要注意的是,以上方法是获取react-draft-wysiwyg编辑器中输入的数据的一种常用方式。但也可以根据具体需求使用其他方法或库来处理数据。
推荐的腾讯云相关产品:腾讯云云开发(CloudBase)
腾讯云云开发(CloudBase)是一款提供云端一体化开发平台的产品。它基于Serverless架构,提供了云端一体化开发工具和服务,包括云函数、云数据库、静态网站托管等。通过腾讯云云开发,您可以快速搭建Web应用、小程序、H5页面等,并实现数据存储、函数计算等功能。
了解更多关于腾讯云云开发的信息,请访问:腾讯云云开发产品介绍
注意:本答案中并未提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商,如有需要可进一步了解这些品牌商的相关产品和服务。
领取专属 10元无门槛券
手把手带您无忧上云