Ich kann die HTML-Ausgabe von draft-js nicht bekommen?

Question

Ich habe mit draft-js von Facebook gespielt, aber ich kann nicht wirklich herausfinden, wie man die HTML-Ausgabe des Editors bekommt. Die Datei console.log im folgenden Beispiel gibt einige _map Eigenschaften aus, aber sie scheinen meinen eigentlichen Inhalt nicht zu enthalten.

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

Es gibt eine handliche Bibliothek, die ich benutzte, draft-js-export-html. Importieren Sie die Bibliothek und Sie sollten in der Lage, HTML, um zu sehen, wenn Sie die Funktion aufrufen, stateToHTML:

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

Ich bin ziemlich neu zu reagieren, so hoffentlich für Sie arbeitet. Ich schaute unter die Haube von contentState und es gibt ein gutes Stück dort, das macht, eine Bibliothek zu verwenden, um die Wesen zu analysieren, die viel verlockender sind.

Der Autor, sstur, answers a tangentially-related question, wo ich über seine Bibliotheken gelernt.

Answer 2

Es ist nur lesbar Attribut nur HTML zu generieren:

<Editor editorState={editorState} readOnly/> 

Answer 3

Ewan. Ich spiele auch mit Draft.js und stieß auf das gleiche Problem. Eigentlich hat Victor eine großartige Lösung geliefert.

Hier sind zwei Bibliotheken, die ich gefunden habe. Der von Victor erwähnte hat mehr Sterne auf GitHub.

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

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

Ich möchte nur hinzufügen, dass es einen Weg gibt, aus dem Inhalt (im JSON-Format) ohne Verwendung einer externen Bibliothek zu drucken. Es ist in der Datenkonvertierungssitzung dokumentiert.

Hier ist, wie ich eine Benutzereingabe die „convertToRaw“ -Funktion

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

mit auszudrucken Achten Sie darauf, die convertToRaw Funktion von Draft.js durch Schreiben importiert:

import convertFromRaw from 'draft-js'; 

Hier ist eine große Blog geschrieben von rajaraodv mit dem Namen How Draft.js Represents Rich Text Data. Es erklärte die Datenkonvertierung im Detail.

Answer 4

Wenn Sie keine weitere Bibliothek zu Ihrem Code hinzufügen möchten, kann der Ansatz von @ farincz gut funktionieren.

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

Der Editor Zustand kann auch direkt auf Speicherschicht gespeichert werden, und wenn Sie es auf das DOM rendern ist es leicht verfügbar und bei der Bearbeitung helfen kann.

Durch Klicken auf den Text können Sie es editierbar machen, oder binden Sie diesen Klick mit einer Bearbeitungsschaltfläche. Sie können die Komponente 'Editor' nicht direkt binden, aber Sie können sie auf dem Wrapper mit dem 'Editor' haben.

<div className="editor" onClick={this.editContent.bind(this)}> 
    <Editor 
    editorState={this.state.editorState} 
    onChange={this.onChange} 
    handleKeyCommand={this.handleKeyCommand} 
    readOnly={this.state.edit} 
    /> 
</div> 

Fügen Sie einfach auf ‚Bearbeiten‘, um Ihren Zustand als wahr, um sicherzustellen, dass readonly wahr ist (der Name ‚Bearbeiten‘ des Staates noch deutlicher machen, wenn es verwirrend ist).

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

schließlich den Wert von ‚Bearbeiten‘ ändern, um falsch zu klicken

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

Answer 5

So wie ich es tat, war:

Shop die editorState als HTML-Zeichenfolge editorState.toString('html') und dann, wenn die zeigt, Ausgabe, verwenden Sie <div className="content__editor" dangerouslySetInnerHTML={{__html: this.state.editorState}}>

Dies ist ziemlich praktisch, wenn Sie nur den Inhalt von draft-js ausgeben möchten, ohne zu viel HTML-Markup hinzuzufügen, übergeben Sie es als Requisiten, wie Sie es mit einer staatenlosen Funktionskomponente tun würden.

auch die Leitlinien der Reaktion folgen auf dangerouslySetInnerHTML XSS-Angriff zu verhindern

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