Я не могу получить выход html из draft-js?

Question

Я играю с черновиком js от Facebook, но я не могу понять, как получить выход html в редакторе. Консоль.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()));

Я довольно новыми для React так что надеюсь, что это работает для вас. Я смотрел под капотом contentState, и там идет честная битка, которая позволяет использовать библиотеку для анализа объектов, которые намного более соблазнительны.

Автор, sstur, answers a tangentially-related question, где я узнал о его библиотеках.

Answer 2

Существует только для чтения атрибут для создания только HTML:

<Editor editorState={editorState} readOnly/> 

Answer 3

Ewan. Я также играю с Draft.js и сталкивался с той же проблемой. На самом деле Виктор предоставил отличное решение.

Вот две библиотеки, которые я нашел. У упомянутого Виктора больше звезд на GitHub.

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

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

Я просто хочу добавить, что есть способ, чтобы распечатать содержимое (в формате JSON) без использования внешних библиотек. Он задокументирован в рамках сеанса преобразования данных.

Вот как я распечатать пользовательский ввод с помощью функции «convertToRaw»

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

Убедитесь, что вы импортировали функцию convertToRaw из Draft.js написав:

import convertFromRaw from 'draft-js'; 

Вот большой блог, написанный rajaraodv по имени How Draft.js Represents Rich Text Data. Он подробно объяснил преобразование данных.

Answer 4

Если вы не хотите добавлять другую библиотеку в свой код, подход @ farincz может работать хорошо.

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

Редактора состояние может быть сохранен непосредственно в вашем накопительном слое, и когда вы делаете его в DOM он легко доступен и может помочь в редактировании.

Нажав на текст, вы можете сделать его редактируемым или связать, нажав кнопку редактирования. Вы не можете напрямую привязать клик к компоненту «Редактор», но вы можете получить его на обертке, содержащей «Редактор».

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

Просто добавьте «изменить», чтобы ваше состояние, как верно, убедившись, что доступен только для чтения истинно (вы можете сделать имя «изменить» государства более очевидным, если это сбивает с толку).

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

Наконец измените значение «Edit» ложь по щелчку

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

Answer 5

так, как я сделал это:

Хранить editorState как HTML строку editorState.toString('html'), а затем при показе output, use <div className="content__editor" dangerouslySetInnerHTML={{__html: this.state.editorState}}>

Это очень удобно, если вы просто хотите вывести содержимое черновиков-js без добавления слишком большой разметки HTML, передавая его как реквизит, как и вы, с функциональным компонентом без состояния.

также следовать указаниям React, чтобы предотвратить XSS нападение на dangerouslySetInnerHTML

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