Chuyển đến nội dung chính

Hướng dẫn

Nhúng

Khái niệm cốt lõi

Mô hình khối

Trung tâm của EditorData là mảng blocks: các đối tượng Block giữ nguyên thứ tự. Mỗi Block mang kiểu của nó (type), dữ liệu theo kiểu (data), và metadata tunes tùy chọn.

TrườngKiểuMô tả
idstring | undefinedMã định danh duy nhất tùy chọn, được editor gán tại thời điểm tạo.
typeBlockToolTypeKhóa ký tự liên kết khối với schema, thành phần nhập liệu và bộ kết xuất của nó.
dataobjectĐối tượng dữ liệu theo kiểu: hình dạng khác nhau theo từng loại khối.
tunesBlockTunes | undefinedTừ điển metadata tune tùy chọn đa kiểu. Khóa là tên tune và giá trị là dữ liệu tự do.
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." }
    }
  ]
}

Công cụ khối so với công cụ nội tuyến

Các công cụ khối tạo ra các khe cắm cấp cao nhất trực tiếp bên trong EditorData. Các công cụ nội tuyến trang trí văn bản bên trong payload html mà một khối chứa. Hai lớp này hoàn toàn tách biệt, chúng không thể thay thế cho nhau.

Đầu ra JSON-first

Trình soạn thảo không bao giờ lưu trữ HTML. Khi bạn gọi editor.data.extract(), bạn nhận được JSON EditorData thuần túy: hoàn chỉnh bao gồm cả URL media. JSON này có thể được lưu trong cơ sở dữ liệu, cá nhân hóa hoặc chuyển đổi sang các định dạng khác.

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 so với Renderer

Editor sử dụng DOM trình duyệt để cho phép người dùng chỉnh sửa nội dung (chỉ trình duyệt). Renderer lấy EditorData đã lưu trước đó và hiển thị nó dưới dạng HTML (có thể chạy trên trình duyệt hoặc qua SSR).

Điều chỉnh khối

Tunes là một khe metadata không phụ thuộc vào kiểu cho bất kỳ loại khối nào. Khóa là tên tune do hệ thống hoặc plugin đặt, và giá trị được gõ thành BlockTuneData: bất kỳ sự kết hợp nào của string, number, boolean hoặc null. Tunes có thể thêm ngữ nghĩa mà không phá vỡ hình dạng dữ liệu cốt lõi.

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