Non riesco a ottenere l'output html da draft-js?

Question

Ho giocato con draft-js su Facebook, ma non riesco a capire come ottenere l'output html dell'editor. Il file console.log nel seguente esempio restituisce alcune proprietà _map, ma non sembrano contenere il mio contenuto effettivo?

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

C'è una pratica libreria che ho usato, draft-js-export-html. Importare la libreria e si dovrebbe essere in grado di vedere HTML una volta che si richiama la funzione, stateToHTML:

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

Sono abbastanza nuovo per reagire quindi spero che questo funziona per voi. Ho guardato sotto il cofano di contentState e c'è un bel po 'di cose che fa uso di una libreria per analizzare le entità che sono molto più allettanti.

L'autore, sstur, answers a tangentially-related question dove ho saputo delle sue biblioteche.

Answer 2

C'è attributo di sola lettura per generare solo HTML:

<Editor editorState={editorState} readOnly/> 

Answer 3

Ewan. Sto giocando anche con Draft.js e ho incontrato lo stesso problema. In realtà, Victor ha fornito un'ottima soluzione.

Ecco due librerie che ho trovato. Quello menzionato da Victor ha più stelle su GitHub.

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

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

Voglio solo aggiungere che c'è un modo per stampare il contenuto (in formato JSON) senza l'utilizzo di una libreria esterna. È documentato nella sessione di conversione dei dati.

ecco come lo stampo fuori l'input dell'utente utilizzando la funzione "convertToRaw"

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

Assicurati importato la funzione convertToRaw da Draft.js scrivendo:

import convertFromRaw from 'draft-js'; 

Qui è un grande post scritto da rajaraodv How Draft.js Represents Rich Text Data. Ha spiegato la conversione dei dati in dettaglio.

Answer 4

Se non si desidera aggiungere un'altra libreria al proprio codice, l'approccio di @ farincz può funzionare correttamente.

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

Lo stato redattore possono essere memorizzati direttamente nel vostro livello di archiviazione e quando si è rendendolo al DOM è facilmente disponibile e può aiutare nella modifica.

Facendo clic sul testo è possibile renderlo modificabile, oppure associare quel clic con un pulsante di modifica. Non è possibile associare direttamente il clic al componente "Editor", ma è possibile averlo nel wrapper che contiene "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> 

Just Add 'modifica' al vostro stato come vero, fare in modo che readOnly è vero (si può fare il nome di 'modifica' dello stato più evidente, se si tratta di confusione).

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

modificare Infine il valore di 'Edit' false al clic

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

Answer 5

Il modo in cui ho fatto è stato:

Conservare l'editorState come una stringa HTML editorState.toString('html') e poi, quando mostra la output, utilizzare <div className="content__editor" dangerouslySetInnerHTML={{__html: this.state.editorState}}>

Questo è piuttosto utile, se si desidera semplicemente generare il contenuto di draft-js senza aggiungere troppo markup HTML, passandolo come oggetti di scena proprio come faresti con un componente funzionale stateless.

anche seguire le linee guida di reagire a prevenire attacchi XSS su dangerouslySetInnerHTML

https://reactjs.org/docs/dom-elements.html