web-dev-qa-db-fra.com

Je n'arrive pas à obtenir la sortie HTML de Draft-js?

J'ai joué avec draft-js de Facebook, mais je n'arrive pas à comprendre comment obtenir la sortie html de l'éditeur. Le fichier console.log de l'exemple suivant génère certaines propriétés _map, mais elles ne semblent pas contenir le contenu réel?

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>
        );
      }
    }
javascriptreactjsdraftjs
15
Ewan Valentine

Il y a un attribut readonly pour générer uniquement du HTML:

<Editor editorState={editorState} readOnly/>
11
farincz

Ewan. Je joue aussi avec Draft.js et suis tombé sur le même problème. En fait, Victor a fourni une excellente solution. 

Voici deux bibliothèques que j'ai trouvées. Celui mentionné par Victor a plus d'étoiles sur GitHub.

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

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

Je veux juste ajouter qu'il existe un moyen d'imprimer le contenu (au format JSON) sans utiliser de bibliothèque externe. Il est documenté sous la session de conversion de données.

Voici comment imprimer les entrées de l'utilisateur à l'aide de la fonction "convertToRaw" 

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

Vérifiez que vous avez importé la fonction convertToRaw de Draft.js en écrivant:

import { convertFromRaw, convertToRaw } from 'draft-js';

Voici un excellent blog écrit par rajaraodv nommé Comment Draft.js représente des données à texte riche Il expliquait la conversion de données en détail.

9
Jun Yin

Si vous ne souhaitez pas ajouter une autre bibliothèque à votre code, l'approche de @ farincz peut bien fonctionner.

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

L'état de l'éditeur peut être directement stocké dans votre couche de stockage et lorsque vous le restituez dans le DOM, il est facilement disponible et peut aider à l'édition.

En cliquant sur le texte, vous pouvez le rendre éditable ou lier ce clic avec un bouton d'édition. Vous ne pouvez pas lier directement le composant 'Editeur' à un clic, mais vous pouvez l'avoir sur l'emballage contenant l'éditeur 'Editeur'.

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

Ajoutez simplement «edit» à votre état comme vrai, en vous assurant que readOnly est vrai (vous pouvez rendre le nom «edit» de l'état plus évident, s'il est déroutant). 

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

Enfin, changez la valeur de 'edit' en false au clic 

editContent() {
  this.setState({
    edit: false
  })
}
1
Paritosh Pundir

La façon dont je l'ai fait était:

Stockez editorState en tant que chaîne html editorState.toString('html') et, lors de l'affichage du résultat, utilisez <div className="content__editor" dangerouslySetInnerHTML={{__html: this.state.editorState}}>

C’est très pratique si vous voulez simplement sortir le contenu de draft-js sans ajouter trop de balises HTML, en le transmettant comme un accessoire, comme vous le feriez avec un composant fonctionnel sans état.

Suivez également les instructions de React pour prévenir les attaques XSS sur dangerouslySetInnerHTML. 

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

0
carkod