Lumaktaw sa pangunahing nilalaman

Mga gabay

Pag-embed

Mga pangunahing konsepto

Ang block model

Ang puso ng EditorData ay ang blocks array: mga Block object na nagpapanatili ng pagkakasunod-sunod. Ang bawat Block ay nagtataglay ng uri nito (type), data na tiyak sa uri, at opsyonal na tunes na metadata.

FieldUriPaglalarawan
idstring | undefinedOpsyonal na natatanging identifier, itinalaga ng editor sa paglikha.
typeBlockToolTypeLiteral na key na nag-uugnay ng block sa schema nito, input component, at renderer.
dataobjectType-specific na data object: nag-iiba ang hugis bawat block type.
tunesBlockTunes | undefinedOpsyonal na cross-type tune metadata dictionary. Ang key ay ang pangalan ng tune at ang value ay free-form na data.
JSON
{
  "time": 1745000000000,
  "version": "1.0.0",
  "blocks": [
    {
      "id": "abc123",
      "type": "header",
      "data": { "html": "Hello world", "level": "h1" }
    },
    {
      "id": "def456",
      "type": "paragraph",
      "data": { "html": "This is a <b>rich</b> paragraph." }
    }
  ]
}

Mga block tool kumpara sa mga inline tool

Ang mga block tool ay gumagawa ng mga top-level na slot nang direkta sa loob ng EditorData. Ang mga inline tool ay nagpapalamuti ng teksto sa loob ng html payload na naglalaman ang isang block. Ang dalawang layer ay ganap na magkahiwalay. Hindi sila maaaring palitan ng isa't isa.

JSON-first na output

Hindi kailanman nagtitiis ng HTML ang editor. Kapag tinawag mo ang editor.data.extract(), makakakuha ka ng purong EditorData JSON: kumpleto kasama ang mga media URL. Ang JSON na ito ay maaaring itago sa isang database, i-personalize, o i-convert sa ibang mga format.

TypeScript
import { Editor } from '@clepit/core';

const editor = Editor.create({ containerId: 'editor' });

const data = editor.data.extract();
// data: EditorData
// {
//   time: 1745000000000,
//   version: '1.0.0',
//   blocks: [ ... ]
// }

Editor kumpara sa Renderer

Ginagamit ng Editor ang browser DOM para hayaan ang isang user na mag-edit ng nilalaman (browser-only). Kinukuha ng Renderer ang dati nang na-save na EditorData at iri-render ito bilang HTML (maaaring tumakbo sa browser o sa pamamagitan ng SSR).

Mga block tune

Ang mga tunes ay isang type-agnostic na metadata slot para sa anumang block type. Ang key ay ang tune name na itinakda ng system o isang plugin, at ang value ay naka-type sa BlockTuneData: anumang kombinasyon ng string, number, boolean, o null. Ang mga tunes ay maaaring magdagdag ng semantics nang hindi sinisira ang hugis ng pangunahing data.

JSON
{
  "id": "abc123",
  "type": "paragraph",
  "data": { "html": "Some text." },
  "tunes": {
    "textAlign": { "alignment": "center" },
    "visibility": { "hidden": false }
  }
}