Nie mogę uzyskać danych wyjściowych html z wersji draft-js?

Question

Gram w gry z draft-js przez Facebooka, ale nie mogę w rzeczywistości dowiedzieć się, jak uzyskać wyjście html z edytora. W poniższym przykładzie konsola.log wyświetla pewne właściwości _map, ale wydaje się, że nie zawierają one mojej rzeczywistej zawartości?

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

Istnieje przydatna biblioteka, której używałem, draft-js-export-html. Importować bibliotekę i powinieneś być w stanie zobaczyć HTML po wywołaniu funkcji stateToHTML:

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

Jestem całkiem nowy, więc miejmy nadzieję, React to działa dla Ciebie. Spojrzałem pod maską contentState i dzieje się tam sporo rzeczy, które sprawiają, że używanie biblioteki do analizowania obiektów jest o wiele bardziej kuszące.

Autor, sstur, answers a tangentially-related question, gdzie dowiedziałem się o jego bibliotekach.

Answer 2

Jest atrybutem tylko do odczytu, aby wygenerować tylko HTML:

<Editor editorState={editorState} readOnly/> 

Answer 3

Ewan. Gram też z Draft.js i natknąłem się na ten sam problem. W rzeczywistości Victor dostarczył świetne rozwiązanie.

Oto dwie biblioteki, które znalazłem. Wspomniany przez Victora ma więcej gwiazdek na GitHub.

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

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

Chcę tylko dodać, że istnieje sposób, aby wydrukować zawartość (w formacie JSON) bez korzystania z zewnętrznej biblioteki. Jest to udokumentowane w ramach sesji konwersji danych.

Oto jak wydrukować dane wprowadzone przez użytkownika za pomocą funkcji „convertToRaw”

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

Upewnij się, że importowane funkcję convertToRaw z Draft.js pisząc:

import convertFromRaw from 'draft-js'; 

Oto wielki blog napisany przez rajaraodv o nazwie How Draft.js Represents Rich Text Data. Wyjaśnił szczegółowo konwersję danych.

Answer 4

Jeśli nie chcesz dodawać innej biblioteki do swojego kodu, podejście @ farincz może działać poprawnie.

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

Stan Edytor może być przechowywany w swojej warstwie pamięci i podczas renderowania go do DOM jest łatwo dostępny i może pomóc w edycji.

Klikając na tekst, który można edytować, lub wiążąc go, kliknij przycisk edycji. Nie można bezpośrednio powiązać kliknięcia z komponentem "Editor", ale można je umieścić w opakowaniu zawierającym "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> 

Wystarczy dodać „edytuj”, aby twój stan jako prawdziwe, upewniając się, że readOnly jest prawdą (można dokonać nazwą „edytuj” państwa bardziej oczywiste, jeśli jest to mylące).

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

końcu zmienić wartość „edytuj” false na kliknięcia

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

Answer 5

Sposób zrobiłem było:

Przechowywać editorState jako ciąg znaków html editorState.toString('html') a kiedy przedstawiający Wydajność, użyj <div className="content__editor" dangerouslySetInnerHTML={{__html: this.state.editorState}}>

Jest to bardzo przydatne, jeśli chcesz po prostu wydrukować zawartość wersji draft-js bez dodawania znaczników HTML, przekazując ją jako rekwizyty, podobnie jak w przypadku bezpaństwowego składnika funkcjonalnego.

także postępować zgodnie z wytycznymi reagować, aby zapobiec ataku XSS na dangerouslySetInnerHTML

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