🎯 Ejemplos recomendados

Balanced sample collections from various categories for you to explore

← Volver a herramientas ← Volver a ejemplos

Ejemplos JSON de Texto Enriquecido

Ejemplos JSON para editores de texto enriquecido (TipTap, Quill, Slate)

📋 JSON Delta de Quill

🟢 simple

Operaciones Delta con encabezados, negritas, listas y enlaces

{
  "ops": [
    { "insert": "Release Notes" },
    { "insert": "
", "attributes": { "header": 2 } },
    { "insert": "Highlights:
", "attributes": { "bold": true } },
    { "insert": "- Faster sync
- Offline mode
" },
    { "insert": "
" },
    { "insert": "Read more", "attributes": { "link": "https://example.com/release" } }
  ]
}

📋 JSON de Texto Enriquecido TipTap

🟡 intermediate

Documento ProseMirror con encabezados, listas, marcas y bloque de código

{
  "type": "doc",
  "content": [
    {
      "type": "heading",
      "attrs": { "level": 2 },
      "content": [{ "type": "text", "text": "Project Update" }]
    },
    {
      "type": "paragraph",
      "content": [
        { "type": "text", "text": "We shipped " },
        { "type": "text", "text": "v2.3", "marks": [{ "type": "bold" }] },
        { "type": "text", "text": " with improved sync and offline mode." }
      ]
    },
    {
      "type": "bulletList",
      "content": [
        {
          "type": "listItem",
          "content": [
            { "type": "paragraph", "content": [{ "type": "text", "text": "Latency down 18%" }] }
          ]
        },
        {
          "type": "listItem",
          "content": [
            { "type": "paragraph", "content": [{ "type": "text", "text": "New read-only sharing" }] }
          ]
        }
      ]
    },
    {
      "type": "codeBlock",
      "attrs": { "language": "json" },
      "content": [
        { "type": "text", "text": "{\"status\":\"ok\",\"version\":\"2.3.0\"}" }
      ]
    }
  ]
}

📋 JSON de Texto Enriquecido Slate

🟡 intermediate

Valor de Slate con párrafos, marcas y una lista con viñetas

[
  {
    "type": "heading-two",
    "children": [{ "text": "Design Review" }]
  },
  {
    "type": "paragraph",
    "children": [
      { "text": "Status: " },
      { "text": "approved", "bold": true },
      { "text": " for Q2." }
    ]
  },
  {
    "type": "bulleted-list",
    "children": [
      { "type": "list-item", "children": [{ "text": "Audit contrast" }] },
      { "type": "list-item", "children": [{ "text": "Finalize icon set" }] }
    ]
  }
]