¡Revelado! Propósito, funciones y mecanismo de KuroEditor vol.2

Política de desarrollo

Dado que esto es para KuroCMS, mi objetivo es ofrecer la mayor versatilidad posible manteniendo la esencia principal. Un editor WYSIWYG es imprescindible, desarrollado con Vanilla JS puro. Debe ser increíblemente rápido, sin frameworks. Evité que fuera un editor estrictamente headless para mantener un acoplamiento débil. Mientras el llamador no especifique un @layer, puede mantener una sensación de unidad adaptándose al diseño de botones del llamador, ¡aunque no usaré eso en KuroCMS! jaja.

El CSS utiliza solo Tailwind más estilos internos para KuroEditor. El comportamiento de las tablas es similar al de Dropbox Paper. Por ahora, aunque no esté perfectamente pulido, siempre que la usabilidad no se vea muy comprometida, priorizaré la finalización sobre los ajustes finos. Después de todo, no comienza hasta que está terminado. Lo lanzará siempre que sea razonablemente utilizable.

Especificaciones detalladas

Explicar especificaciones detalladas en un blog puede ser tedioso, así que se lo mostraré con imágenes.

Como se muestra, KuroEditor tiene dos tipos de vistas en el menú superior: vista previa e HTML. Sin embargo, espero que la mayoría no use la vista HTML. Está destinada a quienes desean escribir características que aún no están en KuroEditor usando HTML, o comprobar el comportamiento interno mediante HTML.

A continuación se muestran los iconos para emojis, creación de tablas, medios, código, líneas horizontales, autoguardado, guardar y tabla de contenido. Los medios básicos se pueden pegar libremente en la posición del cursor mediante arrastrar y soltar, por lo que este botón rara vez se usa.

Decoración básica de texto

Las decoraciones para el texto y la línea del cursor aparecen cuando se selecciona aunque sea un solo carácter. Esto sigue la política de no mostrar menús constantemente y minimizar la distancia de movimiento del mouse.

De izquierda a derecha: Negrita, Cursiva, Subrayado, Tachado. A continuación se muestran h1, h2, etc., para la configuración de encabezados. Luego vienen la barra de citas y el bloque de aviso. Les siguen el color de texto, tamaño de fuente, altura de línea, alineación de texto (izquierda, centro, derecha, justificado), listas con viñetas y listas numeradas. (Por cierto, presionar la tecla Tab crea automáticamente un párrafo). *Los tipos de fuente también se pueden seleccionar en las versiones más nuevas.

Las tablas son la prioridad absoluta

La función de tabla es el punto destacado de KuroEditor. Insertar filas o columnas es similar a Dropbox Paper: cuando el cursor del mouse está cerca de un borde, aparece un botón '+' a su lado. Al hacer clic se inserta una fila o columna. La eliminación se realiza con el botón rojo '-' a la derecha de una fila o debajo de una columna. Manipular tablas es increíblemente fácil. Fusionar y dividir celdas está a un solo botón de distancia. Incluso puede elegir el grosor y el color del borde a través de un menú contextual para afinar los detalles.

Colocación flexible de medios

Pegar medios es completamente flexible. No se limita a las imágenes almacenadas por el llamador; puede crear fácilmente listas de videos interesantes usando enlaces de YouTube. Si desea ingresar una URL desde el teclado, escribir [[ url ]] activará inmediatamente la autoexpansión.

Uso de la tabla de contenido

La gestión de párrafos para novelas o contratos es sencilla utilizando h1, h2, etc. Al usar la tabla de contenido en el menú superior, puede ver de un vistazo qué tan lejos ha escrito, incluso en documentos largos.

Resumen de integración

Finalmente, la integración es sumamente sencilla. Solo inserte una línea donde desee el editor y prepare funciones de devolución de llamada para guardar. Se pasa como HTML. En KuroCMS, este HTML recibido se almacena y gestiona como datos de artículos. Para más detalles, consulte el enlace a continuación. Dado que hay muy pocos puntos de acoplamiento, se puede integrar fácilmente en cualquier herramienta.

Cierre

A los japoneses les encantan las representaciones en tablas (¡al igual que a las casas japonesas les encantan las divisiones! jaja). Con todo, pocos editores extranjeros tienen implementaciones decentes y a menudo carecen de personalización visual. Me intriga especialmente por qué la fusión de celdas es tan rara. En cualquier caso, espero que KuroEditor sea útil para algunas personas.

1. Repositorio de código de GitHub: https://github.com/Kuro-Boo/KuroEditor
2. Página de presentación de KuroEditor: https://kuro.boo/kuroeditor/
3. Página de prueba de KuroEditor: https://kuro.boo/kuroeditor/sample/