Enregistrement dans une base de données

maintenant que vous avez appris les bases de la façon d'ajouter des fonctionnalités à l'éditeur slate, vous vous demandez peut être comment vous pourriez enregistrer le contenu que vous avez modifié, de sorte que vous puissiez revenir à votre application plus tard et qu'elle se charge dans ce guide, nous allons vous montrer comment ajouter une logique pour enregistrer votre contenu slate dans une base de données pour un stockage et une récupération ultérieurs commençons par un éditeur de base const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable /> \</slate> ) } cela rendra un éditeur slate de base sur votre page, et lorsque vous tapez, les choses changeront mais si vous actualisez la page, tout sera rétabli à sa valeur d'origine—rien n'est enregistré ! ce que nous devons faire, c'est enregistrer les modifications que vous apportez quelque part pour cet exemple, nous allons simplement utiliser https //developer mozilla org/en us/docs/web/api/window/localstorage , mais cela vous donnera une idée de l'endroit où vous devrez ajouter vos propres hooks de base de données donc, dans notre onchange gestionnaire, nous devons enregistrer le value const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) return ( \<slate editor={editor} value={value} onchange={value => { setvalue(value) // save the value to local storage const content = json stringify(value) localstorage setitem('content', content) }} \> \<editable /> \</slate> ) } maintenant, chaque fois que vous modifiez la page, si vous regardez dans le stockage local, vous devriez voir le contenu valeur changer mais si vous actualisez la page, tout est toujours réinitialisé c'est parce que nous devons nous assurer que la valeur initiale est tirée de cet emplacement de local storage, comme ceci const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) // update the initial content to be pulled from local storage if it exists const \[value, setvalue] = usestate( json parse(localstorage getitem('content')) || \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ] ) return ( \<slate editor={editor} value={value} onchange={value => { setvalue(value) const content = json stringify(value) localstorage setitem('content', content) }} \> \<editable /> \</slate> ) } maintenant, vous devriez être en mesure de sauvegarder les modifications lors des actualisations ! succès—vous avez du json dans votre base de données mais que faire si vous voulez quelque chose d'autre que du json ? eh bien, vous devrez sérialiser votre valeur différemment par exemple, si vous souhaitez enregistrer votre contenu en texte brut au lieu de json, nous pouvons écrire une logique pour sérialiser et désérialiser des valeurs de texte brut // import the `node` helper interface from slate import { node } from 'slate' // define a serializing function that takes a value and returns a string const serialize = value => { return ( value // return the string content of each paragraph in the value's children map(n => node string(n)) // join them all with line breaks denoting paragraphs join('\n') ) } // define a deserializing function that takes a string and returns a value const deserialize = string => { // return a value array of children derived by splitting the string return string split('\n') map(line => { return { children \[{ text line }], } }) } const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) // use our deserializing function to read the data from local storage const \[value, setvalue] = usestate( deserialize(localstorage getitem('content')) || '' ) return ( \<slate editor={editor} value={value} onchange={value => { setvalue(value) // serialize the value and save the string value to local storage localstorage setitem('content', serialize(value)) }} \> \<editable /> \</slate> ) } ça marche ! maintenant, vous travaillez avec du texte brut vous pouvez émuler cette stratégie pour n'importe quel format que vous aimez vous pouvez sérialiser en html, en markdown, ou même dans votre propre format json personnalisé qui est adapté à votre cas d'utilisation 🤖 notez que même si vous pouvez sérialiser votre contenu comme vous le souhaitez, il y a des compromis le processus de sérialisation a un coût en lui même, et certains formats peuvent être plus difficiles à manipuler que d'autres en général, nous recommandons d'écrire votre propre format uniquement si votre cas d'utilisation a un besoin spécifique pour cela sinon, il est souvent préférable de laisser les données dans le format utilisé par slate