我一直在玩Facebook的draft-js,但我实际上无法弄清楚如何获得编辑器的html输出。以下示例中的console.log输出了一些_map
属性,但它们似乎不包含我的实际内容?
class ContentContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
editorState: EditorState.createEmpty()
};
this.onChange = (editorState) => this.setState({editorState});
this.createContent = this.createContent.bind(this);
}
createContent() {
console.log(this.state.editorState.getCurrentContent());
}
render() {
const {editorState} = this.state;
const { content } = this.props;
return (
<Template>
<br /><br /><br />
<ContentList content={content} />
<div className="content__editor">
<Editor editorState={editorState} onChange={this.onChange} ref="content"/>
</div>
<FormButton text="Create" onClick={this.createContent.bind(this)} />
</Template>
);
}
}
答案 0 :(得分:24)
我使用了一个方便的库,draft-js-export-html。导入库,一旦调用函数stateToHTML
:
console.log(stateToHTML(this.state.editorState.getCurrentContent()));
我对React很新,所以希望这对你有用。我在contentState
的引擎盖下看了一下,在那里有一点点,它使用一个库来解析那些更具吸引力的实体。
作者,sstur,answers a tangentially-related question我在那里了解了他的图书馆。
答案 1 :(得分:11)
只有生成HTML的readonly属性:
<Editor editorState={editorState} readOnly/>
答案 2 :(得分:9)
伊万。我也在玩Draft.js并遇到了同样的问题。实际上,Victor提供了一个很好的解决方案。
这是我找到的两个库。 Victor提到的那个在GitHub上有更多的明星。
https://github.com/sstur/draft-js-export-html
https://github.com/rkpasia/draft-js-exporter
我只想补充说,有一种方法可以在不使用外部库的情况下打印内容(采用JSON格式)。它记录在数据转换会话中。
以下是使用&#34; convertToRaw&#34;打印用户输入的方法。功能
console.log(convertToRaw(yourEditorContentState.getCurrentContent()));
确保通过编写:
从Draft.js导入convertToRaw函数import { convertFromRaw, convertToRaw } from 'draft-js';
这是由rajaraodv撰写的名为 How Draft.js Represents Rich Text Data 的精彩博客。它详细解释了数据转换。
答案 3 :(得分:2)
如果不愿意在代码中添加其他库,@ farincz的方法可以很好地工作。
<Editor editorState={this.state.editorState} readOnly/>
编辑器状态可以直接存储在您的存储层中,当您将其呈现给DOM时,它很容易获得并可以帮助编辑。
通过单击文本可以使其可编辑,或者使用编辑按钮绑定该单击。您不能直接将click单击绑定到'Editor'组件,但是您可以在包含'Editor'的包装器上使用它。
<div className="editor" onClick={this.editContent.bind(this)}>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
handleKeyCommand={this.handleKeyCommand}
readOnly={this.state.edit}
/>
</div>
只需将'edit'添加到您的状态为true,确保readOnly为true(如果令人困惑,您可以使状态的名称'edit'更明显)。
this.state = {
editorState: EditorState.createEmpty(),
edit: true
};
最后,点击
将'edit'的值更改为falseeditContent() {
this.setState({
edit: false
})
}
答案 4 :(得分:0)
我这样做的方式是:
将editorState存储为html字符串editorState.toString('html')
,然后在显示输出时,使用<div className="content__editor" dangerouslySetInnerHTML={{__html: this.state.editorState}}>
这非常方便,如果您只想输出draft-js的内容而不添加太多的HTML标记,将其作为道具传递,就像使用无状态功能组件一样。
另请遵循React的指南,以防止对dangerouslySetInnerHTML进行XSS攻击