Rich text

Editor con barra de herramientas y área editable. El componente provee el contenedor; el contenido es slot libre.

Default · toolbar + contenido + footer

Política de devoluciones

Aceptamos devoluciones dentro de los 30 días posteriores a la compra. El producto debe estar en su estado original, sin uso visible.

Conservar el ticket
Embalaje original
Reembolso en 5–7 días hábiles

24 palabras último guardado · hace 2 min

<div class="richtext">
  
<div class="head" role="toolbar" aria-label="Formato">
  <select class="richtext-select" aria-label="Estilo">
    <option value="p">Párrafo</option>
    <option value="h1">Título 1</option>
    <option value="h2">Título 2</option>
    <option value="h3">Título 3</option>
  </select>
  <span class="richtext-divider"></span>
  <button type="button" class="richtext-btn" aria-label="Negrita" title="Negrita (⌘B)">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z"/></svg>
  </button>
  <button type="button" class="richtext-btn" aria-label="Cursiva" title="Cursiva (⌘I)">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>
  </button>
  <button type="button" class="richtext-btn" aria-label="Lista" title="Lista con viñetas">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/></svg>
  </button>
  <button type="button" class="richtext-btn" aria-label="Enlace" title="Enlace (⌘K)">
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
  </button>
  <span class="richtext-spacer"></span>
  <button type="button" class="richtext-btn" aria-label="Deshacer" title="Deshacer (⌘Z)">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 7 3 13 9 13"/><path d="M3 13a9 9 0 1 0 3-7"/></svg>
  </button>
</div>
<div class="body" contenteditable="true" data-placeholder="Escribe aquí…">
  <h2>Política de devoluciones</h2>
  <p>Aceptamos devoluciones dentro de los <strong>30 días</strong> posteriores a la compra. El producto debe estar en su <em>estado original</em>, sin uso visible.</p>
  <ul>
    <li>Conservar el ticket</li>
    <li>Embalaje original</li>
    <li>Reembolso en 5–7 días hábiles</li>
  </ul>
</div>
<div class="foot">
  <span>24 palabras</span>
  <span>último guardado · hace 2 min</span>
</div>

</div>

{% from "text.jinja" import text %}
{% call text() %}
<div class="head" role="toolbar" aria-label="Formato">
  <select class="richtext-select" aria-label="Estilo">
    <option value="p">Párrafo</option>
    <option value="h1">Título 1</option>
    <option value="h2">Título 2</option>
    <option value="h3">Título 3</option>
  </select>
  <span class="richtext-divider"></span>
  <button type="button" class="richtext-btn" aria-label="Negrita" title="Negrita (⌘B)">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z"/></svg>
  </button>
  <button type="button" class="richtext-btn" aria-label="Cursiva" title="Cursiva (⌘I)">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>
  </button>
  <button type="button" class="richtext-btn" aria-label="Lista" title="Lista con viñetas">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/></svg>
  </button>
  <button type="button" class="richtext-btn" aria-label="Enlace" title="Enlace (⌘K)">
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
  </button>
  <span class="richtext-spacer"></span>
  <button type="button" class="richtext-btn" aria-label="Deshacer" title="Deshacer (⌘Z)">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 7 3 13 9 13"/><path d="M3 13a9 9 0 1 0 3-7"/></svg>
  </button>
</div>
<div class="body" contenteditable="true" data-placeholder="Escribe aquí…">
  <h2>Política de devoluciones</h2>
  <p>Aceptamos devoluciones dentro de los <strong>30 días</strong> posteriores a la compra. El producto debe estar en su <em>estado original</em>, sin uso visible.</p>
  <ul>
    <li>Conservar el ticket</li>
    <li>Embalaje original</li>
    <li>Reembolso en 5–7 días hábiles</li>
  </ul>
</div>
<div class="foot">
  <span>24 palabras</span>
  <span>último guardado · hace 2 min</span>
</div>
{% endcall %}

<Text>
<div class="head" role="toolbar" aria-label="Formato">
  <select class="richtext-select" aria-label="Estilo">
    <option value="p">Párrafo</option>
    <option value="h1">Título 1</option>
    <option value="h2">Título 2</option>
    <option value="h3">Título 3</option>
  </select>
  <span class="richtext-divider"></span>
  <button type="button" class="richtext-btn" aria-label="Negrita" title="Negrita (⌘B)">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z"/></svg>
  </button>
  <button type="button" class="richtext-btn" aria-label="Cursiva" title="Cursiva (⌘I)">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>
  </button>
  <button type="button" class="richtext-btn" aria-label="Lista" title="Lista con viñetas">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/></svg>
  </button>
  <button type="button" class="richtext-btn" aria-label="Enlace" title="Enlace (⌘K)">
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
  </button>
  <span class="richtext-spacer"></span>
  <button type="button" class="richtext-btn" aria-label="Deshacer" title="Deshacer (⌘Z)">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 7 3 13 9 13"/><path d="M3 13a9 9 0 1 0 3-7"/></svg>
  </button>
</div>
<div class="body" contenteditable="true" data-placeholder="Escribe aquí…">
  <h2>Política de devoluciones</h2>
  <p>Aceptamos devoluciones dentro de los <strong>30 días</strong> posteriores a la compra. El producto debe estar en su <em>estado original</em>, sin uso visible.</p>
  <ul>
    <li>Conservar el ticket</li>
    <li>Embalaje original</li>
    <li>Reembolso en 5–7 días hábiles</li>
  </ul>
</div>
<div class="foot">
  <span>24 palabras</span>
  <span>último guardado · hace 2 min</span>
</div>
</Text>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Variante minimal · sin toolbar

Texto editable inline para encabezados, descripciones cortas o anotaciones rápidas.

<div class="richtext minimal">
  
<div class="body" contenteditable="true" data-placeholder="Edición inline sin barra…">
  <p>Texto editable inline para encabezados, descripciones cortas o anotaciones rápidas.</p>
</div>

</div>

{% from "text.jinja" import text %}
{% call text(variant="minimal") %}
<div class="body" contenteditable="true" data-placeholder="Edición inline sin barra…">
  <p>Texto editable inline para encabezados, descripciones cortas o anotaciones rápidas.</p>
</div>
{% endcall %}

<Text variant="minimal">
<div class="body" contenteditable="true" data-placeholder="Edición inline sin barra…">
  <p>Texto editable inline para encabezados, descripciones cortas o anotaciones rápidas.</p>
</div>
</Text>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

API

Prop	Tipo	Default	Descripción
`variant`	str	"default"	`default` · `minimal` · `sm` · `lg`.
`attrs`	dict	None	Atributos extra (data-signals, etc).

Slot: .head (toolbar, role=toolbar), .body (contenteditable) y .foot (wordcount) opcional.

La toolbar es slot abierto: el consumidor compone los .richtext-btn que necesite (Negrita, Cursiva, Lista, Enlace, Encabezados, Código, Deshacer/Rehacer…). Cada botón debe llevar aria-label + title para accesibilidad y tooltip nativo.