Flutter Quill - Plugin WYSIWYG o de Contenido Enriquecido de HTML

▶

Te voy a mostrar cómo puedes emplear un plugin similar a CKEditor o, en resumen, a los plugins de tipo WYSIWYG (What You See Is What You Get), es decir, lo que ves es lo que obtienes en el contenido final. La diferencia fundamental aquí es que no se emplea HTML directamente, a diferencia de cualquier aplicación web tradicional que utilice CKEditor.

Funcionalidades del plugin

El plugin, como puedes ver en pantalla, permite varias configuraciones:

• Tipografía: Puedes cambiarla desde la barra de control.
• Tamaño de fuente: Se puede ajustar indicando un valor numérico.
• Bloques de código: Permite insertar contenido con formato especial.

En resumen, este plugin permite crear contenido enriquecido sobre un campo de texto de manera sencilla. Lo que ves en pantalla es exactamente el plugin en acción, listo para editar texto con diferentes estilos y formatos.

https://pub.dev/packages/flutter_quill

El llamado flutter_quill viene siendo este esta es la página oficial y vamos a ver cómo lo configuras una vez instalado que es el típico en el y colocarlo:

dependencies:
  flutter:
    sdk: flutter
  ***
  flutter_quill:

Lo importas y por aquí creas una instancia tal cual puedes ver aquí tenemos otras yo coloqué el basit te estoy mostrando la configuración:

import 'package:flutter_quill/flutter_quill.dart';
***
final QuillController _controllerHtmlEditor = QuillController.basic();
  @override
  void dispose() {
    _controllerHtmlEditor.dispose();
    super.dispose();
  }
 ***

Cuando creas tu instancia, recuerda hacer el dispose, como con muchos otros recursos, por ejemplo, las animaciones.

Aquí, lo que estoy haciendo es inicializar un comentario existente. Esta es la forma de inicializarlo en caso de que te interese:

• Obtenemos el document, que representa lo escrito por el usuario.
• Se emplean un par de funciones que te mostraba en otro video, fromDelta y toHtml, para convertir entre Delta y HTML según sea necesario.

_controllerHtmlEditor.document = Document.fromDelta(htmlToDelta(c)),

Esto aplica nuevamente si estás empleando HTML para guardar el contenido. En ese caso, es importante hacer esta conversión a Delta. Si el contenido lo estás guardando localmente en la aplicación, no sería necesario hacer la conversión, salvo que quieras trabajar con Delta para su almacenamiento.

Inicialización del contenido

Aquí puedes ver el resultado utilizando una función de promesa, ya que se trata de una petición a mi resAPI. Este paso es opcional, y solo sirve para inicializar el contenido.

Configuración del plugin

La configuración del plugin puede parecer un poco extraña porque se divide en dos bloques:

Barra de herramientas: Esta es la parte superior, donde se ubican los colores, el fondo, las listas, etc. Aquí es donde defines el estilo de la barra de edición.

Caja de contenido: En este caso, de manera opcional, le coloqué un pequeño estilo para evitar que apareciera un espacio vacío. Esto también permite controlar el interlineado y el tamaño del área de edición.

Finalmente, se establece el nombre del plugin y se le pasa la instancia que creamos anteriormente. Con esto, tu plugin queda funcionando correctamente, tal como se muestra en pantalla.

QuillSimpleToolbar(
          controller: _controllerHtmlEditor,
          configurations: const QuillSimpleToolbarConfigurations(),
        ),
        Container(
          padding: const EdgeInsets.all(5),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5),
              border: Border.all(color: Theme.of(context).primaryColor),
              color: appTheme.darkTheme ? Colors.black26 : Colors.black12),
          height: 300,
          child: QuillEditor.basic(
            controller: _controllerHtmlEditor,
            configurations: const QuillEditorConfigurations(),
          ),
        ),

Delta en Flutter para dar formato a textos enriquecidos (HTML) y emplear WYSIWYG

▶

Te quería comentar un poco cómo puedes manejar lo que es Delta y 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 estilos, pero en formato JSON. No es exactamente lo mismo, aunque sí podemos hacer algunas traducciones entre ambos formatos.

¿Por qué esto es importante? Porque hay ciertos plugins o componentes que seguramente vas a requerir. En mi caso, utilizo este plugin, que es similar al de WYSIWYG —“lo que ves es lo que obtienes”— que empleamos en el desarrollo web. En este caso, está 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 viceversa

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>

Esto es algo que puedes ver en la documentación oficial de cada uno de los plugins que te voy a mostrar en pantalla. En resumen, este tipo de plugins no trabaja directamente con HTML y CSS, sino con un equivalente llamado Delta, que es el formato con el que se maneja la información internamente.

Con Delta es con lo que podemos trabajar. Aun así, para este tipo de operaciones en las que la presentación final no es tan crítica —por ejemplo, que si el texto aparece en negritas aquí y no en otra parte—, no hay mayor problema.

Sin embargo, trato de respetar en la medida de lo posible el estilo que la persona define al momento de escribir su contenido, aunque no siempre se mantenga al 100%.

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 básicamente es un string, y lo convertimos a Delta utilizando htmlToDelta.

const delta = htmlToDelta(html);

De igual manera, podemos convertir un Delta de vuelta a HTML usando deltaToHtml. Esto es lo inverso y resulta útil para guardar o mostrar el contenido. Los plugins que utilizo para estas conversiones ya los tengo importados y puedes verlos en pantalla. Más detalles, ejemplos y configuraciones están disponibles en la documentación oficial.

En mi caso, una configuración sencilla fue suficiente para trabajar correctamente.

Ejemplo de uso: edición de contenido

En el proyecto, cuando guardo contenido en la base de datos, lo almaceno como HTML. Por lo tanto, si quiero editar ese contenido, debo convertirlo a Delta para que pueda ser manejado por el editor que se muestra en pantalla.

• Paso 1: Obtener el HTML desde la base de datos.
• Paso 2: Convertir ese HTML a Delta usando el método mencionado.
• Paso 3: Establecer el Delta en el editor para poder editar el contenido.

Ejemplo de uso: envío de contenido

Cuando realizo la edición y presiono enviar, el contenido debe volver a la base de datos como HTML.

Primero, obtengo el documento del editor y extraigo el Delta.

Luego, convierto ese Delta a HTML utilizando el método correspondiente del plugin.

Finalmente, envío el HTML a la API, que lo guardará en la base de datos.

De esta manera, la aplicación se encarga siempre de hacer las conversiones entre HTML y Delta, ya sea de HTML a Delta al cargar contenido para editar, o de Delta a HTML al guardar los cambios.

Contexto

Este flujo es necesario porque la aplicación de Academia nació como aplicación web y ahora se está adaptando a otras plataformas, como Flutter. Por lo tanto, la conversión entre HTML y Delta permite mantene