html çıktısını taslak-jlerden alamıyorum?

Question

Facebook tarafından taslak js ile uğraşıyorum, ancak editörün html çıktısını nasıl elde edeceğimi anlayamıyorum. Aşağıdaki örnekte bulunan konsol.log bazı _map özelliklerini verir, ancak gerçek içeriğimi içermiyor gibi görünüyor mu?

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

Kullandığım kullanışlı bir kitaplık var, draft-js-export-html. stateToHTML, kütüphane aktarın ve işlevini çağırmak kez HTML görmek mümkün olmalıdır:

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

yüzden umarım bu sizin için çalışan Tepki için oldukça yeni. contentState'un kapağının altına baktım ve orada çok daha cazip olan varlıkları ayrıştırmak için bir kütüphane kullanılmasını sağlayan oldukça az şey var.

Yazar, sstur, answers a tangentially-related question kütüphanelerini öğrendim.

Answer 2

sadece HTML üretmek salt okunur özelliği yoktur:

<Editor editorState={editorState} readOnly/> 

Answer 3

Ewan. Ayrıca Draft.js ile oynuyor ve aynı soruna rastladım. Aslında Victor harika bir çözüm sağladı.

Burada bulduğum iki kitaplık var. Victor'un belirttiği gibi GitHub'da daha fazla yıldız var. Sadece harici bir kütüphane kullanmadan (JSON biçiminde) içerik yazdırmak için bir yol olduğunu eklemek istiyorum

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

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

. Veri Dönüştürme oturumu altında belgelenmiştir. İşte

import convertFromRaw from 'draft-js'; 

büyük olduğunu: Burada

Ben

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

yazılı tarafından Draft.js gelen convertToRaw işlevini ithal emin olun "convertToRaw" işlevini kullanarak kullanıcı girişi çıktısını nasıl rajaraodv tarafından yazılmış blog, How Draft.js Represents Rich Text Data. Veri dönüşümünü ayrıntılı olarak açıkladı.

Answer 4

Kodunuza başka bir kitaplık eklemek istemiyorsanız, @ farincz'in yaklaşımı iyi bir şekilde çalışabilir.

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

editör devlet

doğrudan depolama katmanında saklanabilir ve DOM bunu render zaman kolayca kullanılabilir ve düzenleme yardımcı olabilir.

Metni tıklattığınızda, düzenlenebilir hale getirebilir ya da bu düğmeyi bir düzenleme düğmesi ile bağlayabilirsiniz. 'Editor' bileşenine doğrudan bağlanamazsınız, ancak 'Editör' içeren sarıcıda buna sahip olabilirsiniz.

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

Sadece (kafa karıştırıcı olup olmadığını, daha belirgin devletin adı 'düzenle' yapabilirsiniz) salt okunur doğrudur emin yapma, devlet olarak true 'düzenle' ekleyin.

Mağaza editorState bir html dizesi olarak editorState.toString('html') ve sonra gösterilirken:

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

Nihayet öyle olduğunu did tıklamada false

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

Answer 5

yolu 'düzenlemek' değerini değiştirmek çıktı, kullanın <div className="content__editor" dangerouslySetInnerHTML={{__html: this.state.editorState}}>

Çok fazla HTML biçimlendirmesi eklemeden taslak js içeriğini çıkarmak istiyorsanız, bu oldukça kullanışlı bir yöntemdir. tıpkı vatansız bir işlevsel bileşenle yapacağınız gibi sahne olarak. Ayrıca

'taslak-js' dan dangerouslySetInnerHTML üzerinde

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