🎯 Рекомендуемые коллекции

Балансированные коллекции примеров кода из различных категорий, которые вы можете исследовать

← Назад к инструментам ← Назад к примерам

Примеры JSON для Rich Text

Примеры JSON для редакторов rich text (TipTap, Quill, Slate)

📋 JSON Delta для Quill

🟢 simple

Delta-операции с заголовками, жирным, списками и ссылками

{
  "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 rich text для TipTap

🟡 intermediate

Документ ProseMirror с заголовками, списками, маркировкой и блоком кода

{
  "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 rich text для Slate

🟡 intermediate

Значение Slate с абзацами, маркировками и маркированным списком

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