Enregistrement dans une base de données

maintenant que vous avez appris les bases de l'ajout de fonctionnalités à l'éditeur slate, vous vous demandez peut être comment enregistrer le contenu que vous avez modifié, afin de pouvoir revenir à votre application plus tard et le charger dans ce guide, nous allons vous montrer comment ajouter une logique pour enregistrer votre contenu slate dans une base de données afin de le stocker et de le récupérer plus tard commençons avec un éditeur basique const initialvalue = \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ] const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) return ( \<slate editor={editor} value={initialvalue}> \<editable /> \</slate> ) } cela affichera un éditeur slate basique sur votre page, et lorsque vous tapez, les éléments changeront mais si vous actualisez la page, tout sera réinitialisé à sa valeur originale — rien n'est enregistré ! ce que nous devons faire est enregistrer les modifications que vous effectuez quelque part pour cet exemple, nous allons simplement utiliser local storage 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 gestionnaire onchange , nous devons enregistrer la valeur si autre chose que la sélection a été modifié const initialvalue = \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ] const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) return ( \<slate editor={editor} value={initialvalue} onchange={value => { const isastchange = editor operations some( op => 'set selection' !== op type ) if (isastchange) { // save the value to local storage const content = json stringify(value) localstorage setitem('content', content) } }} \> \<editable /> \</slate> ) } désormais, chaque fois que vous modifiez la page, si vous regardez dans local storage, vous devriez voir la valeur contenu 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 récupérée depuis le même emplacement 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 initialvalue = usememo( json parse(localstorage getitem('content')) || \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ], \[] ) return ( \<slate editor={editor} value={initialvalue} onchange={value => { const isastchange = editor operations some( op => 'set selection' !== op type ) if (isastchange) { // save the value to local storage const content = json stringify(value) localstorage setitem('content', content) } }} \> \<editable /> \</slate> ) } vous devriez maintenant pouvoir enregistrer les modifications même après des actualisations ! succès — vous avez du json dans votre base de données mais que faire si vous voulez autre chose que du json ? eh bien, vous devrez sérialiser votre valeur différemment par exemple, si vous voulez enregistrer votre contenu sous forme de texte brut plutôt que json, nous pouvons écrire une logique pour sérialiser et désérialiser des valeurs en 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 initialvalue = usememo( deserialize(localstorage getitem('content')) || '', \[] ) return ( \<slate editor={editor} value={initialvalue} onchange={value => { const isastchange = editor operations some( op => 'set selection' !== op type ) if (isastchange) { // serialize the value and save the string value to local storage localstorage setitem('content', serialize(value)) } }} \> \<editable /> \</slate> ) } cela fonctionne ! vous travaillez maintenant avec du texte brut vous pouvez reproduire cette stratégie pour n’importe quel format que vous souhaitez vous pouvez sérialiser vers html, vers markdown, ou même vers votre propre format json personnalisé adapté à votre cas d'utilisation 🤖 notez que même si vous pouvez sérialiser votre contenu comme vous le souhaitez, il existe des compromis le processus de sérialisation a un coût en soi, et certains formats peuvent être plus difficiles à manipuler que d’autres en général, nous vous recommandons d’écrire votre propre format seulement si votre cas d’utilisation a un besoin spécifique sinon, vous avez souvent intérêt à laisser les données dans le format utilisé par slate si vous souhaitez mettre à jour le contenu de l’éditeur en réponse à des événements provenant de l’extérieur de slate, vous devez modifier directement la propriété children la manière la plus simple consiste à remplacer la valeur de editor children editor children = newvalue et déclencher un nouveau rendu (par exemple en appelant editor onchange() dans l'exemple ci dessus) vous pouvez également utiliser les opérations internes de slate pour transformer la valeur, par exemple / resetnodes resets the value of the editor it should be noted that passing the `at` parameter may cause a "cannot resolve a dom point from slate point" error / resetnodes\<t extends node>( editor editor, options { nodes? node | node\[], at? location } = {} ) void { const children = \[ editor children] children foreach((node) => editor apply({ type 'remove node', path \[0], node })) if (options nodes) { const nodes = node isnode(options nodes) ? \[options nodes] options nodes nodes foreach((node, i) => editor apply({ type 'insert node', path \[i], node node })) } const point = options at && point ispoint(options at) ? options at editor end(editor, \[]) if (point) { transforms select(editor, point) } }