Põhimõisted
Ploki mudel
EditorData tuum on blocks massiiv: Block objektid, mis säilitavad järjestuse. Iga Block kannab oma tüüpi, tüübispetsiifilisi andmeid ja valikulisi tunes metaandmeid.
| Väli | Tüüp | Kirjeldus |
|---|---|---|
| id | string | undefined | Valikuline unikaalne identifikaator, määratakse redaktori poolt loomisel. |
| type | BlockToolType | Sõnasõnaline võti, mis seob ploki selle skeemi, sisendkomponendi ja renderdajaga. |
| data | object | Tüübispetsiifiline andmeobjekt: kuju erineb iga plokitüübi puhul. |
| tunes | BlockTunes | undefined | Valikuline tüübideülene tune metaandmete sõnastik. Võti on tune nimi, väärtus on vabas vormis andmed. |
{
"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." }
}
]
}Plokitööriistad vs tekstisisesed tööriistad
Plokitööriistad loovad ülataseme pesasid otse EditorData sees. Tekstisisesed tööriistad kaunistavad teksti html-koormuse sees, mida plokk sisaldab. Kaks kihti on täiesti eraldiseisvad. Neid ei saa üksteisega asendada.
JSON-esmane väljund
Redaktor ei salvestata kunagi HTML-i. Kui kutsute editor.data.extract(), saate puhta EditorData JSON-i: täieliku, sealhulgas meedia URL-idega. Seda JSON-i saab salvestada andmebaasi, isikupärastada või teistesse vormingutesse teisendada.
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 vs Renderer
Ploki tuned
Tuned on tüübist sõltumatu metaandmete pesa mis tahes plokitüübi jaoks. Võti on tune nimi, mille määrab süsteem või plugin, ja väärtus on tüübistatud BlockTuneData-ks: mis tahes kombinatsioon string, number, boolean või null. Tuned saavad lisada semantikat ilma põhiandmete kuju rikkumata.
{
"id": "abc123",
"type": "paragraph",
"data": { "html": "Some text." },
"tunes": {
"textAlign": { "alignment": "center" },
"visibility": { "hidden": false }
}
}