Je ne peux pas obtenir le code html de sortie de projet-js?

J'ai été jouer avec le projet d'-js par Facebook, mais je ne peux pas vraiment comprendre comment obtenir le code html de sortie de l'éditeur. De la console.journal dans l'exemple suivant affiche des _map propriétés, mais ils ne semblent pas contenir de mon contenu?

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>
        );
      }
    }

InformationsquelleAutor Ewan Valentine | 2016-04-18

24

Il y a une pratique de la bibliothèque que j'ai utilisé, projet-js-export-html. L'importation de la bibliothèque et vous devriez être en mesure de voir HTML une fois que vous appeler la fonction stateToHTML:

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

Je suis assez nouveau à Réagir, alors j'espère que cela fonctionne pour vous. J'ai regardé sous le capot de contentState et il est un peu juste passe là-bas qui rend l'utilisation d'une bibliothèque pour analyser les entités beaucoup plus séduisant.

L'auteur, sstur, les réponses d'un tangentiellement liés à la question où j'ai appris à propos de ses bibliothèques.
- Considérons celui-ci qui est utilisé dans draftjs officiel exemples: github.com/hubspot/draft-convert
InformationsquelleAutor Victor
11

Il est en lecture seule attribut pour générer de l'HTML:
```
<Editor editorState={editorState} readOnly/>
```
InformationsquelleAutor farincz
9

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

Voici les deux bibliothèques que j'ai trouvé. Celui qui est 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 y a moyen d'imprimer le contenu (au format JSON) sans utiliser une bibliothèque externe. Il est documenté en vertu de la Conversion de Données de session.

Voici comment j'ai imprimer la saisie de l'utilisateur à l'aide de la "convertToRaw" fonction
```
console.log(convertToRaw(yourEditorContentState.getCurrentContent())); 
```
Assurez-vous que vous avez importé le convertToRaw fonction de Draft.js par écrit:
```
import { convertFromRaw, convertToRaw } from 'draft-js';
```
Voici un super blog écrit par rajaraodv nommé Comment Draft.js Représente Riche De Données Texte. Il a expliqué la conversion des données en détail.
- importer {convertFromRaw, convertToRaw} de projet-js';
InformationsquelleAutor Jun Yin
2

Si pas prêts pour ajouter une bibliothèque à votre code, @farincz approche peut fonctionner.
```
<Editor editorState={this.state.editorState} readOnly/>
```
L'éditeur de l'état peut être directement stockés dans votre couche de stockage et lorsque vous êtes rendu à la cathédrale, il est facilement disponible et peut aider dans le montage.

En cliquant sur le texte, vous pouvez le rendre modifiable, ou de lier cela, cliquez avec le bouton editer. Vous ne pouvez pas lier directement cliquez pour "Éditeur de composant, mais vous pouvez l'avoir sur l'emballage contenant l' "Éditeur".
```
<div className="editor" onClick={this.editContent.bind(this)}>
  <Editor
    editorState={this.state.editorState}
    onChange={this.onChange}
    handleKeyCommand={this.handleKeyCommand}
    readOnly={this.state.edit}
  />
</div>
```
Juste ajouter "modifier" de votre état, en tant que vrai, en s'assurant que readOnly est vrai (vous pouvez rendre le nom "modifier" de l'état de plus en plus évidents, si elle est source de confusion).
```
this.state = {
 editorState: EditorState.createEmpty(), 
 edit: true
};
```
Enfin changer la valeur de "modifier" pour de faux sur cliquez sur
```
editContent() {
  this.setState({
    edit: false
  })
}
```
InformationsquelleAutor Paritosh Pundir
-1

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

Stocker les editorState comme une chaîne html editorState.toString('html') et puis lorsque l'affichage de la sortie, utilisez <div className="content__editor" dangerouslySetInnerHTML={{__html: this.state.editorState}}>

C'est assez pratique, si vous voulez juste simplement sortie de la teneur du projet-js sans ajouter trop de balisage HTML, passant comme des accessoires tout comme vous le feriez avec un apatride composante fonctionnelle.

Suivent également la Réagissent les lignes directrices pour prévenir les attaques XSS sur dangerouslySetInnerHTML

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

InformationsquelleAutor carkod

Vous devez vous connecter pour publier un commentaire.