Hecho con Chinaski

El editor

El contenido de cuerpo en páginas y posts se escribe en un editor de texto enriquecido (Quill): botones de formato familiares, HTML plano por debajo, con algunos ayudantes específicos de Chinaski para imágenes, enlaces y bloques de contenido. Esta página cubre lo que hay en la barra de herramientas, los ayudantes inteligentes integrados en ella y las reglas sobre qué cuenta como contenido de cuerpo válido.

Dónde aparece

El editor es el campo Body en el editor de páginas y en el editor de posts. Edita solo el contenido: los títulos, los slugs, los campos SEO, las fechas y todo lo demás en esas pantallas son campos de formulario separados. Los archivos del editor se sirven desde tu propio servidor (sin CDN externo) y se verifican por integridad como el resto de la interfaz de admin.

La barra de herramientas

Grupo Botones
Texto Negrita, cursiva, subrayado, tachado
Headings Heading 2, 3, 4 y Normal: los headings comienzan en H2
Bloques Blockquote, bloque de código
Listas Numerada, con viñetas
Objetos inline Link, Imagen
Limpieza Borrar formato

No hay H1 en el editor de cuerpo: el campo de título propio de la página/post es el único h1; los headings del cuerpo comienzan en H2 para que cada página tenga una jerarquía de headings única y consistente. Tampoco hay selectores de fuente ni de color: la tipografía es trabajo del tema, y eso es lo que mantiene el sitio publicado consistente (y libre de JavaScript en tiempo de ejecución).

Trabajar con imágenes

El botón de imagen abre la biblioteca de medios en un selector en lugar de pedir una URL. Elige la imagen que ya subiste (o súbela allí), y se coloca en tu cursor. Las imágenes siempre provienen de la biblioteca: primero la abasteces, y las usas en las páginas después.

Trabajar con enlaces

El botón de enlace: o Ctrl/Cmd+K en cualquier parte del editor: abre un panel de enlaces. Mientras escribes, sugiere páginas y posts publicados de tu propio site por título o slug (en el mismo idioma que estás editando, cuando aplica), incluyendo la URL completa de las páginas anidadas. Presiona Enter (o haz clic) en una sugerencia para usarla, o pega cualquier URL externa. Las sugerencias solo incluyen páginas que están realmente en vivo, así que no puedes enlazar accidentalmente a borradores.

Bloques de contenido en el cuerpo

Los bloques de contenido reutilizables (CTAs, citas, galerías, formularios…) se incrustan en el cuerpo como shortcodes {{block:name}​}: pero el editor los muestra como chips amigables en lugar de código crudo:

  • Insertar un bloque: usa el botón Insert Block (un diálogo con buscador que lista tus bloques), escribe / en el texto para abrir un selector de bloques en línea (teclas de flecha + Enter, Esc para cancelar), o inserta un shortcode desde la Content Library.
  • Los chips muestran lo que son: cada chip está etiquetado con el nombre del bloque en lugar de exponer la sintaxis del shortcode.
  • Los chips son clicables: haz clic en un chip para abrir la pantalla de edición de ese bloque en una pestaña nueva, ajusta el bloque, y ya estará actualizado en todas partes donde se use en el próximo build.
  • Al guardar, los chips se convierten en shortcodes reales en el cuerpo almacenado; al recargar, vuelven a ser chips. Pegar contenido con marcas {{block:…}​} en el editor también las convierte en chips.

Cómo se comporta tu texto con el servidor

Existen algunas reglas de calidad para que meses de edición no corrompan lentamente las páginas:

  • Las líneas vacías se limpian. Las líneas en blanco que la maquinaria de Quill agrega en cada guardado se colapsan: los párrafos vacíos repetidos se convierten en uno, y la línea en blanco suelta al final de un artículo se elimina.
  • El cuerpo no puede estar vacío. Una página o post necesita contenido de cuerpo: texto visible, una imagen o un bloque incrustado: el espacio en blanco puro y las etiquetas vacías se rechazan con un claro mensaje "Body is required", tanto en el formulario como de nuevo en el servidor.
  • Todo lo demás se almacena tal cual. El HTML que produce el editor es exactamente lo que sirve el site publicado.

Borradores

Mientras editas, tu trabajo se guarda periódicamente en el servidor como borrador. Si tu navegador se cierra o falla, el editor muestra un banner que ofrece el borrador guardado para que continúes en lugar de reescribir. (Una vez que guardas correctamente, el almacén de borradores se sincroniza para coincidir.)

Otras superficies del editor

  • Un modal de selector de documentos está disponible desde los editores de página/post para enlazar a documentos administrados.
  • El editor se comparte entre páginas y posts, así que ambos usan las mismas reglas de headings, el mismo manejo de imágenes y la misma incrustación de bloques.
Lee este sitio en