¡KuroEditor evoluciona! Detalles de las funciones vol.3
¡Novedades de la última versión de KuroEditor! Explicamos en detalle las nuevas funciones, las razones de su implementación y la filosofía de diseño detrás del editor.
El editor WYSIWYG «KuroEditor», que hoy constituye el núcleo de los productos de Kuro-Boo (incluido el código abierto), sigue buscando un rendimiento ultrarrápido mediante JavaScript puro sin dependencias de frameworks y una gran facilidad de uso. En el anterior «vol.2», presentamos el formato de texto básico, la colocación de medios y las tablas al estilo de Dropbox Paper. Pero la evolución de KuroEditor no se detiene ahí. En esta ocasión, destacamos las funciones añadidas desde entonces, explicando las intenciones de desarrollo y el contexto para ofrecerle una historia que no encontrará en los manuales de usuario habituales. Adéntrese en la visión general de «KuroEditor vol.3», diseñado para expresar su mundo de forma rica y sin estrés.
Tablas sin límites: importación de Excel y diseño detallado
Una de las funciones a las que se prestó más atención en el desarrollo de KuroEditor fue la de las tablas. Cualquiera que haya utilizado editores clásicos sabe lo rudimentario que suele ser su tratamiento. Modificar el fondo de una celda, unir o dividir celdas son acciones que suelen ser complejas o no estar disponibles.
Organizar la información en tablas cuidadas es indispensable para clarificar comparativas, tarifas o síntesis de datos. Por ello, KuroEditor ofrece herramientas avanzadas para gestionar tablas con gran precisión.
La principal ventaja radica en la generación automática de tablas al copiar y pegar desde Excel, Google Sheets o archivos CSV. Basta con pegar las celdas copiadas directamente en el editor: KuroEditor analiza el formato en segundo plano y reconstruye al instante una tabla HTML limpia. Esto evita tener que recrear cada celda a mano. Cree su tabla en Excel y péguela directamente de forma sencilla.
El editor también permite ajustar el grosor y color de los bordes exteriores, interiores, o de una línea específica. Las opciones de unión (a la derecha o abajo), división, alineación vertical y color de fondo se gestionan con el ratón. Este cuidado por el detalle es lo que distingue a KuroEditor de otras soluciones.
Diferencia entre «Enter» y «Shift+Enter»: la estructura de los párrafos
Un aspecto esencial del manual de KuroEditor es la diferencia entre salto de línea y párrafo. Dependiendo de si pulsa «Enter» o «Shift + Enter» para ir a la siguiente línea, la estructura HTML generada es totalmente distinta. Entender esta diferencia es primordial para controlar el diseño.
Pulsar «Enter» crea un nuevo párrafo (etiqueta <p>), tratado como un bloque independiente. Como las funciones de alineación o sangría se aplican por párrafo, puede alinear a la derecha una sola línea si está aislada en su propio bloque. Por el contrario, «Shift + Enter» inserta un salto de línea (etiqueta <br>) dentro del mismo párrafo. Todo se ve como un bloque único y cualquier cambio de sangría afectará a todas las líneas asociadas.
Este comportamiento evita el espaciado excesivo involuntario entre líneas y conserva un control semántico preciso. Use «Shift + Enter» para agrupar líneas cortas como direcciones o poemas, y «Enter» para transiciones lógicas. Esto resulta útil para estructurar listas complejas sin forzar formatos rígidos.
Esta función resulta útil para estructurar listas complejas. En muchas herramientas como Microsoft Word o Dropbox Paper, las listas numeradas son posibles, pero a veces resulta frustrante porque los números no se encadenan como uno desea, o no se puede insertar un bloque de texto plano entre dos elementos de la lista. KuroEditor simplifica todo esto y permite crear listas complejas sin esfuerzo.
El «Bloque redondeado» para dar ritmo al diseño y la distribución de texto
Los artículos en línea suelen limitarse a una columna vertical donde se alternan texto e imágenes de manera monótona. Aunque la lectura en móviles es la norma, este diseño puede cansar en pantallas grandes. Para solucionarlo, se creó la función de «Bloque redondeado (kuro-roundbox)».
Este bloque se inserta con un clic desde el menú inferior. Puede contener texto, imágenes o tablas. Un menú contextual permite ajustar su ancho (del 30 % al 100 %) y su alineación (izquierda, centro, derecha).
La ventaja radica en la distribución de texto. Al alinear un bloque a la derecha con un ancho del 45 %, el texto siguiente se coloca de forma natural a la izquierda. Es ideal para añadir recuadros o notas. Para detener esta distribución, basta con insertar una línea horizontal (hr) que envíe el contenido posterior debajo del bloque. Esto aporta dinamismo y mejora el confort de lectura.
Las «Tarjetas URL» y atajos de emoji para agilizar la escritura
Los enlaces son indispensables, pero los simples enlaces azules de texto a veces no destacan cuando se quiere resaltar una referencia importante. KuroEditor soluciona esto con las «Tarjetas URL (kuro-url-card)».
Al crear un enlace, marcar la opción tarjeta recupera los metadatos del objetivo (icono, título, URL) para generar un bloque visual elegante. El lector identifica de inmediato el destino del enlace. Si el sitio no está disponible, el editor oculta los elementos que falten. A diferencia de otras herramientas como Dropbox Paper que transforman automáticamente cada URL en tarjeta, KuroEditor permite elegir entre enlace clásico, tarjeta sencilla o tarjeta enriquecida con imágenes.
Para no romper el ritmo de escritura, el editor integra códigos cortos para emojis. No busque más en menús con el ratón: escriba :smile:, :fire: o :+1: para que se transforme al instante en el emoji correspondiente. Un gran ahorro de tiempo para redactores habituales.
Listas de tareas y «Tarjetas de Receta» semánticas
KuroEditor integra funciones prácticas para uso personal, como las listas de tareas (Todo), útiles en aplicaciones de notas.
- Revisar correos
- Preparar café
Escribir [] al inicio de línea genera una casilla de verificación. El estado se guarda en el código HTML del artículo. En la página pública, estas casillas sirven como elemento visual fijo y los lectores no pueden marcarlas, pero siguen siendo útiles para estructurar guías o listas de control.
Para blogs de cocina, el editor ofrece una «Tarjeta de Receta (kuro-recipe)» estructurada. Reúne raciones, tiempos, ingredientes y pasos. Esta tarjeta genera datos estructurados conformes con las directrices SEO de Google. Para mayor claridad, se limita a una tarjeta por artículo (el botón se desactiva si ya hay una). Para saber más, consulte el artículo sobre recetas de KuroCMS.
Bloques de código optimizados: reorganización mediante arrastrar y botón de copiar
Para artículos técnicos, la presentación de código es crucial. KuroEditor facilita la vida a los desarrolladores con bloques de código interactivos diseñados para simplificar la escritura y lectura.
Es posible mover un bloque de código arrastrándolo por su zona de números de línea. Es mucho más seguro y práctico que cortar y pegar texto, lo que suele romper la sangría o dañar la estructura HTML.
Además, para mejorar la experiencia de los lectores, un script añade automáticamente un botón de copia rápida (📋) en la esquina superior derecha de los bloques de código en las páginas públicas. Una atención especial que simplifica el uso de fragmentos.
Conclusión: la fidelidad absoluta del WYSIWYG
KuroEditor no busca solo alinear texto, sino ofrecer una experiencia WYSIWYG total donde el diseño en edición corresponda exactamente a la página publicada. Lograr esto en JavaScript puro, sin frameworks ni compromisos con la velocidad de carga, representa un gran desafío. Gracias a su diseño modular, KuroEditor se integra en pocas líneas de código en cualquier CMS.