Lewati ke konten utama

Panduan

Penyematan

Konsep inti

Model blok

Inti dari EditorData adalah array blocks: objek Block yang mempertahankan urutan. Setiap Block membawa tipenya, data spesifik tipe, dan metadata tunes opsional.

BidangTipeDeskripsi
idstring | undefinedPengenal unik opsional, ditetapkan oleh editor saat pembuatan.
typeBlockToolTypeKunci literal yang mengikat blok ke skema, komponen input, dan renderer-nya.
dataobjectObjek data spesifik tipe: bentuk berbeda per jenis blok.
tunesBlockTunes | undefinedKamus metadata tune opsional lintas tipe. Kunci adalah nama tune dan nilai adalah data bebas.
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." }
    }
  ]
}

Alat blok vs alat inline

Alat blok membuat slot tingkat atas langsung di dalam EditorData. Alat inline menghias teks di dalam payload html yang dimiliki sebuah blok. Dua lapisan ini sepenuhnya terpisah. Tidak dapat saling menggantikan.

Output JSON-first

Editor tidak pernah menyimpan HTML. Saat Anda memanggil editor.data.extract(), Anda mendapatkan JSON EditorData murni: lengkap termasuk URL media. JSON ini dapat disimpan dalam database, dipersonalisasi, atau dikonversi ke format lain.

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 vs Renderer

Editor menggunakan DOM browser agar pengguna dapat mengedit konten (hanya browser). Renderer mengambil EditorData yang telah tersimpan sebelumnya dan merendernya sebagai HTML (dapat berjalan di browser atau melalui SSR).

Penyetelan blok

Tunes adalah slot metadata yang tidak bergantung pada tipe untuk semua jenis blok. Kuncinya adalah nama tune yang ditetapkan oleh sistem atau plugin, dan nilainya diketik ke BlockTuneData: kombinasi apa pun dari string, number, boolean, atau null. Tunes dapat menambah semantik tanpa merusak bentuk data inti.

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