draft-jsからhtml出力を取得できません。

Question

私はFacebookのdraft-jで遊んでいましたが、実際にエディタの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> 
     ); 
     } 
    } 

Answer 1

私が使用した便利なライブラリがあります。draft-js-export-htmlです。ライブラリをインポートして、あなたが関数を呼び出したら、HTMLを見ることができるはず、stateToHTML：

console.log(stateToHTML(this.state.editorState.getCurrentContent()));

私はうまくいけば、これはあなたのために働く反応させるためにはかなり新しいです。私はcontentStateのフードの下を見ています。そこには、ライブラリを使ってエンティティを解析し、はるかに魅力的なものが作られています。

著者、sstur、answers a tangentially-related question私は彼のライブラリについて学びました。

Answer 2

だけでHTMLを生成するために、読み取り専用属性があります：

<Editor editorState={editorState} readOnly/> 

Answer 3

ユアンが。私もDraft.jsで遊んでいて、同じ問題を抱えていました。実際、Victorは素晴らしい解決策を提供しています。

ここに2つのライブラリがあります。 Victorの言葉にはGitHubの星がたくさんあります。

https://github.com/sstur/draft-js-export-html

https://github.com/rkpasia/draft-js-exporter

私は外部のライブラリを使用せずに（JSON形式）コンテンツをプリントアウトする方法があることを追加します。これは、データ変換セッションで文書化されています。ここで

import convertFromRaw from 'draft-js'; 

は素晴らしいです：ここでは

は、あなたが書き込みによってDraft.jsからconvertToRaw機能を輸入していることを確認してください、私は

console.log(convertToRaw(yourEditorContentState.getCurrentContent())); 

「convertToRaw」機能を使用してユーザー入力をプリントアウトする方法ですブログrajaraodvによって書かれたHow Draft.js Represents Rich Text Dataという名前のブログ。データ変換について詳細に説明しました。

Answer 4

コードに別のライブラリを追加したくない場合は、@ farinczのアプローチがうまくいく可能性があります。

<Editor editorState={this.state.editorState} readOnly/> 

エディタの状態が直接あなたのストレージ層に保存することができ、あなたがDOMにそれをレンダリングするとき、それは容易に入手可能で、編集に役立つことができます。

テキストをクリックすると、編集可能にすることも、編集ボタンでそのクリックをバインドすることもできます。 '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> 

ただ、読み取り専用で（それが混乱している場合は、国家の名「編集」をより明確にすることができます）真であることを確認して、自分の状態に真の[編集]を追加します。示すときにHTML文字列editorState.toString('html')として

ストアeditorStateと最後にクリック

editContent() { 
    this.setState({ 
    edit: false 
    }) 
} 

Answer 5

にfalseに私はそれがあったんでした道を「編集」の値を変更

this.state = { 
editorState: EditorState.createEmpty(), 
edit: true 
}; 

出力、使用<div className="content__editor" dangerouslySetInnerHTML={{__html: this.state.editorState}}>

あまりにも多くのHTMLマークアップを追加せずにdraft-jの内容を出力したい場合は、これを使うと便利ですあなたがステートレスな機能コンポーネントと同じように小道具として。

また 'ドラフト-JS' からインポート{convertFromRaw、convertToRaw}