Inicio rápido

Este ejemplo usa un blueprint de Tailor; el campo contenteditor funciona igual en cualquier formulario del backend.

1. Añade el campo a un blueprint

Añade el campo a un blueprint, p. ej. app/blueprints/blog/post.yaml. allowBlocks y maxDepth son límites opcionales:

fields:
    content:
        label: Content
        type: contenteditor
        allowBlocks: [heading, richtext, image, section]
        maxDepth: 2

Aplica el cambio con php artisan tailor:migrate.

2. Redacta algo de contenido

1. Abre una entrada, haz clic en + Añadir bloque y elige Encabezado. El nuevo bloque queda seleccionado en el árbol de estructura.
2. Haz clic en él (o pulsa Enter) para abrir sus ajustes y escribe en Texto. La vista previa se actualiza mientras escribes.
3. Añade del mismo modo un bloque Texto enriquecido y guarda la entrada.

3. Renderízalo en el frontend

En una página del CMS o un partial, renderiza el documento con el filtro:

{{ record.content|rc_blocks }}

O adjunta el componente renickContent y usa {% component 'renickContent' document=record.content %}.

Cada bloque se renderiza desde sobrescritura del tema → predeterminado del plugin → marcador de posición seguro, así que la página funciona antes de que tu tema aporte marcado para los bloques. Siguiente: el recorrido por el editor y los bloques predeterminados.