Delta en Flutter para dar formato a textos enriquecidos (HTML) y emplear wysiwyg
Te presento un mecanismo para poder dar formatos a textos en Flutter.
Te quería comentar un poco cómo puedes manejar lo que es el Delta y el html haciendo una pequeña introducción.
El delta no es más que una estructura como la siguiente es algo similar al html aplicando el estilos pero en formato json no es lo mismo aún así podemos hacer algunas traducciones Y por qué esto es importante porque Hay ciertos plugin ciertos componentes que seguramente vas a requerir en mi caso es este plugin que es similar al de wysiwyg es decir lo que ve lo que obtienes que empleamos en en el desarrollo web y en este caso es implementado en Flutter.
Sincronizar Delta y HTML
Tal cual puedes ver en mi caso es para la aplicación de Academia que utilizo aquí en este caso es el plugin de CKEditor y por aquí para la parte de los comentarios como puedes ver los comentarios de una clase y aquí yo tengo para colocar contenido en texto enriquecido tal cual puedes ver un h1 puedo colocar aquí un listado bueno el listado no lo habilité acá ahora que estoy viendo luego lo coloco puedes colocar negritas etcétera puedes colocar ese tipo de operaciones.
Delta no es igual al HTML y viseversa
Aquí vamos a tenerlo no es exactamente lo mismo aquí también yo tengo un estilo aplicado es decir el su un rayado es por lados de estilo ya eso es otro tema pero en esencia el html viene siendo un h1 algo similar otra vez la traducción no es perfecta:
[{insert: Title 1}, {insert:
, attributes: {header: 2}}, {insert: Content, attributes: {bold: true}}, {insert:
}]
<div data-v-8d2ec44a=""><h2>Title 1</h2><p><strong>Content</strong></p></div>
Y esto es algo que puedes ver en en la documentación oficial de cada uno de los plugin que te voy a mostrar en pantalla pero sería lo más cerca que tenemos en resumen por aquí en este tipo de plugin no se maneja lo que es el html y el ccs sino se maneja una especie de equivalente algo similar que viene siendo el delta entonces con eso es lo que podemos trabajar aún así para este tipo de operación ion en las cuales la presentación a la final no es tan importante es decir que si aquí esto aparece negritas y por aquí no aparecen negritas tampoco pasa tanto es simplemente un comentario pero por más que sea le quiero respetar un poco lo que es el estilo que puede definir en la persona al momento de escribir el comentario pero otra vez es lo que tenemos entonces cómo funciona el plugin en sí te lo voy a explicar en otro video en este caso solamente quiero hablar un poco lo que es de Delta html y de html a Delta.
Delta a html
Tenemos un plugin para cada una de estas situaciones que es justamente que estoy empleando aquí fíjate que te muestro uno del Delta a Html:
import 'package:vsc_quill_delta_to_html/vsc_quill_delta_to_html.dart';
String deltaToHTML(List<Map<String, dynamic>> delta) {
// final deltaOps = [
// {'insert': 'Hello\n'},
// {
// 'insert': 'This is colorful',
// 'attributes': {'color': '#f00'}
// }
// ];
final converter = QuillDeltaToHtmlConverter(
delta,
// ConverterOptions.forEmail(),
);
return converter.convert();
}Aquí Recuerda que el Delta sería lo que vamos a traducir un Delta en formato de mapa y el método que empleamos sería el de bueno el que puedes ver en pantalla simplemente pasamos el delta y él hace aquí la conversión
Html a Delta
Para la otra de html a delta:
import 'package:flutter_quill_delta_from_html/flutter_quill_delta_from_html.dart';
Delta htmlToDelta(String html) {
try {
return HtmlToDelta().convert(html);
} catch (e) {
// return HtmlToDelta().convert('<p></p>');
return Document.fromJson([
{'insert': '\n'},
]).toDelta();
}
}Aquí recibimos el html que sería un String básicamente y utilizamos aquí el html delta con html y aquí tendríamos el delta y poco más que decir los plugins en cuestión por aquí los tengo importados esto que tengo por acá y que lo puedes ver aquí en pantalla y aquí tienes más en en la documentación oficial simplemente coloca esto otra vez este de Delta convierte en delta a partir de un html y este convierte un Delta a html es decir lo inverso y otra vez aquí tienes los ejemplos y las configuraciones y demás en mi caso con la configuración sencillita fue más que suficiente cómo los empleo para ya terminar este video voy a buscar este por aquí en el proyecto y vamos a ir viendo algunos ejemplos en este caso aquí en el de Tab voy a ver este mejor en este caso este es para cuando yo en la base de datos yo lo que guardo es un html en la base de datos en el servidor por lo tanto cuando yo quiero editar el contenido vengo acá a comentarios y le doy aquí a editar
Entonces yo tengo que convertir ese html a un Delta que es justamente lo que estoy haciendo por acá para luego establec éso a lo que es el editor en sí que es el que está viendo aquí en pantalla entonces este viene siendo un posible uso en cuanto al otro voy a buscar este por aquí por ejemplo a ver aquí para cuando ya realicé la edición es decir yo vine por acá y hice los cambios y voy a darle aquí enviar justamente en este paso el mensaje fue enviado lo que hago es comunicarme con la Api y envío el contenido pero para enviar el contenido como te digo en la base de datos yo guardo es html y css y por lo tanto tengo que convertir ese Delta a un html y para eso empleo el editor mencionado que más adelante te lo explico en otro video obtengo el documento obtengoel delta lo traduzco un json para que lo pueda manejar desde el plugin y empleo el método correspondiente que tal cual te mostraba hace unos momentos lo que hace es convertir de Delta a html y eso es lo que finalmente va a recibir mi resapi y es lo que va a guardar en la base de datos por lo tanto el que se encarga de hacer siempre las conversiones de Delta html y de html a Delta es justamente la aplicación aquí en flurer por lo comentado antes porque la aplicación de Academia nació siendo una aplicación web y ahorita es que le estoy adaptando a otras plataformas
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter