web-dev-qa-db-fra.com

Projet js. Persister EditorContent to database

J'essaie de persister draft-js De EditorContent dans la base de données, puis de lire et recréer à nouveau l'objet EditorContent. Mais EditorContent.getPlainText() supprime le contenu en texte riche. Je ne sais pas comment faire autrement.

Comment persister correctement EditorContent?

javascriptreactjsdraftjs
25
Dulguun Otgon

La méthode getPlainText(), comme son nom l'indique, ne renvoie que le texte brut sans mise en forme riche. Vous devez utiliser les fonctions convertToRaw () et convertFromRaw () pour sérialiser et désérialiser le contenu de l'éditeur.

Vous pouvez les importer de cette façon si nécessaire: (en supposant que vous utilisez ES6)

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

Si vous devez exporter du HTML à la place, voir https://medium.com/@rajaraodv/how-draft-js-represent-rich-text-data-eeabb5f25cf2#926 (pas sûr de pouvoir importer le contenu de HTML, cependant)

40
christophetd

J'ai constaté que je dois stringify et parse l'objet RawContentState lors de la lecture et de l'enregistrement dans la base de données.

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

// the raw state, stringified
const rawDraftContentState = JSON.stringify( convertToRaw(this.state.editorState.getCurrentContent()) );
// convert the raw state back to a useable ContentState object
const contentState = convertFromRaw( JSON.parse( rawDraftContentState) );
10
sealocal

Il y a un tas de réponses utiles ici, donc je veux ajouter ceci démo jsfiddle . Il montre comment cela fonctionne en action. Pour sauvegarder et récupérer le contenu de l'éditeur, ici local storage est utilisé. Mais pour le cas de la base de données, le principe de base est le même.

Dans cette démo, vous pouvez voir un composant éditeur simple, lorsque vous cliquez sur SAVE RAW CONTENT TO LOCAL STORAGE, nous enregistrons le contenu de l'éditeur actuel sous forme de chaîne dans le stockage local. Nous utilisons convertToRaw et JSON.stringify pour ça:

 saveRaw = () => {
  var contentRaw = convertToRaw(this.state.editorState.getCurrentContent());

  localStorage.setItem('draftRaw', JSON.stringify(contentRaw));
}

Si après cela, vous rechargez la page, votre éditeur sera initialisé avec le contenu et les styles que vous enregistrez. Dans constructor, nous lisons la propriété de stockage local appropriée, et avec JSON.parse, convertFromRaw et createWithContent les méthodes initialisent l'éditeur avec le contenu précédemment stocké.

constructor(props) {
  super(props);

  let initialEditorState = null;
  const storeRaw = localStorage.getItem('draftRaw');

  if (storeRaw) {
    const rawContentFromStore = convertFromRaw(JSON.parse(storeRaw));
    initialEditorState = EditorState.createWithContent(rawContentFromStore);
  } else {
    initialEditorState = EditorState.createEmpty();
  }

  this.state = {
    editorState: initialEditorState
  };
}
3
Mikhail Shabrikov

Persister

const contentStateJsObject = ContentState.toJS();
const contentStateJsonString = JSON.stringify(contentStateJS);

l'état du contenu peut maintenant être conservé sous forme de chaîne JSON.

Pour recréer ContentState

const jsObject = JSON.parse(jsonString);
const contentState = new ContentState(jsObject);
3
Dulguun Otgon