🎯 empfohlene Sammlungen

Balanced sample collections from various categories for you to explore

← Zurück zu den Tools ← Zurück zu den Beispielen

Rich-Text-JSON-Beispiele

JSON-Beispiele für Rich-Text-Editoren (TipTap, Quill, Slate)

📋 Quill-Delta-JSON

🟢 simple

Delta-Operationen mit Überschriften, Fett, Listen und Links

{
  "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" } }
  ]
}

📋 TipTap Rich-Text-JSON

🟡 intermediate

ProseMirror-Dokument mit Überschriften, Listen, Auszeichnungen und Codeblock

{
  "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\"}" }
      ]
    }
  ]
}

📋 Slate Rich-Text-JSON

🟡 intermediate

Slate-Wert mit Absätzen, Markierungen und einer Aufzählungsliste

[
  {
    "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" }] }
    ]
  }
]