Guardando en una Base de Datos

ahora que has aprendido lo básico sobre cómo agregar funcionalidad al editor de slate, podrías preguntarte cómo guardar el contenido que has estado editando, de manera que puedas volver a tu aplicación más tarde y cargarlo en esta guía, te mostraremos cómo agregar lógica para guardar tu contenido de slate en una base de datos para almacenamiento y recuperación más tarde comencemos con un editor básico 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> ) } eso renderizará un editor básico de slate en tu página, y cuando escribas, las cosas cambiarán pero si actualizas la página, todo volverá a su valor original—¡nada se guarda! lo que necesitamos hacer es guardar los cambios que realices en algún lugar para este ejemplo, solo usaremos https //developer mozilla org/en us/docs/web/api/window/localstorage , pero te dará una idea de dónde necesitarías agregar tus propios ganchos de base de datos así que, en nuestro onchange manejador, necesitamos guardar el valor 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> ) } ahora, cada vez que edites la página, si miras en almacenamiento local, deberías ver el contenido cambiando pero si actualizas la página, todo se restablece eso es porque necesitamos asegurarnos de que el valor inicial se extraiga de esa misma ubicación de almacenamiento local, así 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> ) } ¡ahora deberías poder guardar cambios a través de las actualizaciones! éxito tienes json en tu base de datos pero, ¿qué pasa si quieres algo diferente a json? bueno, necesitarías serializar tu valor de manera diferente por ejemplo, si quieres guardar tu contenido como texto plano en lugar de json, podemos escribir alguna lógica para serializar y deserializar valores de texto plano // 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> ) } ¡eso funciona! ahora estás trabajando con texto plano puedes emular esta estrategia para cualquier formato que desees puedes serializar a html, a markdown, o incluso a tu propio formato json personalizado que esté adaptado a tu caso de uso 🤖 ten en cuenta que aunque puedes puedes serializar tu contenido como desees, hay compensaciones el proceso de serialización tiene un costo en sí mismo, y ciertos formatos pueden ser más difíciles de manejar que otros en general, recomendamos escribir tu propio formato solo si tu caso de uso tiene una necesidad específica para ello de lo contrario, a menudo es mejor dejar los datos en el formato que usa slate