Tham chiếu khối

Clepit cung cấp 12 loại khối tích hợp sẵn. Mỗi khối có một cấu trúc JSON, một bộ kết xuất và một đường chèn theo lập trình thông qua editor.blocks.insert.

Tất cả các khối dùng chung một lớp bao bọc khi được tuần tự hóa: id, type, data và một bản ghi tunes tùy chọn.

Cấu trúc của khối

Mọi khối đều được tuần tự hóa vào cùng một phong bì JSON. id được chỉ định bởi trình soạn thảo và có thể bỏ qua khi xây dựng dữ liệu theo lập trình.

JSON

{
  "id": "abc123",
  "type": "paragraph",
  "data": { "html": "Hello <b>world</b>" },
  "tunes": {}
}

alert

Hộp chú thích được tô sáng với 4 biến thể.

Trường	Kiểu	Bắt buộc	Mô tả
html	string	Có	Nội dung HTML của thông báo cảnh báo. Đánh dấu công cụ nội tuyến được hỗ trợ.
variant	'error' \| 'info' \| 'success' \| 'warning'	Có	Kiểu hiển thị của cảnh báo. Một trong: error, info, success, warning.

JSON

{
  "type": "alert",
  "data": { "html": "Your session will expire in 5 minutes.", "variant": "warning" }
}

audio

Khối âm thanh. Được xử lý qua callback audioUploader trên Editor.create.

Trường	Kiểu	Bắt buộc	Mô tả
url	string	Có	URL của tệp âm thanh cần nhúng.
caption	string	Không	Chú thích văn bản thuần hiển thị bên dưới trình phát.
alt	string	Không	Nhãn có thể truy cập cho phần tử âm thanh.
alignment	'center' \| 'left' \| 'right'	Không	Căn chỉnh ngang của trình phát. Một trong: center, left, right.

JSON

{
  "type": "audio",
  "data": { "url": "/media/podcast.mp3", "caption": "Episode 12", "alignment": "center" }
}

checklist

Danh sách hộp kiểm tương tác với trạng thái đã chọn cho từng mục.

Trường	Kiểu	Bắt buộc	Mô tả
items	ChecklistItem[]	Có	Mảng các mục danh sách kiểm tra, mỗi mục có text và trạng thái checked.
items[].text	string	Có	Nội dung HTML của nhãn mục.
items[].checked	boolean	Có	Hộp kiểm có được chọn hay không.

JSON

{
  "type": "checklist",
  "data": {
    "items": [
      { "text": "Install the package", "checked": true },
      { "text": "Mount the editor", "checked": false }
    ]
  }
}

code

Khối mã có tô sáng cú pháp. Hỗ trợ 50 ngôn ngữ, bao gồm typescript, python, rust, go, ruby, swift và kotlin.

Trường	Kiểu	Bắt buộc	Mô tả
code	string	Có	Chuỗi mã nguồn thô để hiển thị.
language	CodeLanguage	Không	Ngôn ngữ tô sáng cú pháp. Mặc định là typescript.
theme	CodeTheme	Không	Chủ đề màu sắc của trình soạn thảo. Mặc định là github-dark.
showCopy	boolean	Không	Hiển thị nút sao chép trong đầu ra được kết xuất.

JSON

{
  "type": "code",
  "data": { "code": "const x = 42;", "language": "typescript", "theme": "github-dark", "showCopy": true }
}

delimiter

Dấu phân cách trực quan giữa các phần.

Trường	Kiểu	Bắt buộc	Mô tả
variant	'line' \| 'stars'	Có	Kiểu hiển thị của dải phân cách. Một trong: line, stars.

JSON

{
  "type": "delimiter",
  "data": { "variant": "line" }
}

header

Tiêu đề cấp cao nhất và tiêu đề mục (h1 đến h6). Các công cụ nội tuyến hoạt động bên trong payload html.

Trường	Kiểu	Bắt buộc	Mô tả
html	string	Có	Nội dung HTML của tiêu đề. Đánh dấu công cụ nội tuyến được hỗ trợ.
level	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'	Không	Cấp độ tiêu đề. Một trong: h1, h2, h3, h4, h5, h6. Mặc định là h1.

JSON

{
  "type": "header",
  "data": { "html": "Getting started", "level": "h2" }
}

image

Khối hình ảnh với chú thích và văn bản alt. Được xử lý qua callback imageUploader trên Editor.create.

Trường	Kiểu	Bắt buộc	Mô tả
url	string	Có	URL của hình ảnh cần nhúng.
caption	string	Không	Chú thích văn bản thuần hiển thị bên dưới hình ảnh.
alt	string	Không	Văn bản alt cho phần tử hình ảnh.
alignment	'center' \| 'left' \| 'right'	Không	Căn chỉnh ngang của hình ảnh. Một trong: center, left, right.

JSON

{
  "type": "image",
  "data": { "url": "/img/hero.jpg", "caption": "Hero image", "alt": "A hero", "alignment": "center" }
}

list

Danh sách có thứ tự hoặc không có thứ tự. Mỗi mục là html.

Trường	Kiểu	Bắt buộc	Mô tả
type	'ordered' \| 'unordered'	Có	Loại danh sách. Một trong: ordered, unordered.
items	string[]	Có	Mảng các chuỗi HTML, một chuỗi cho mỗi mục danh sách.

JSON

{
  "type": "list",
  "data": { "type": "unordered", "items": ["First item", "Second item"] }
}

paragraph

Đoạn văn bản định dạng phong phú. Chấp nhận đánh dấu công cụ nội tuyến như bold, italic, code, link, marker và tooltip.

Trường	Kiểu	Bắt buộc	Mô tả
html	string	Có	Nội dung HTML của đoạn văn. Đánh dấu công cụ nội tuyến được hỗ trợ.

JSON

{
  "type": "paragraph",
  "data": { "html": "This is a <b>paragraph</b> with inline markup." }
}

quote

Khối trích dẫn với phần ghi nguồn tác giả tùy chọn.

Trường	Kiểu	Bắt buộc	Mô tả
html	string	Có	Nội dung HTML của phần thân trích dẫn. Đánh dấu công cụ nội tuyến được hỗ trợ.
author	string	Không	Ghi công bằng văn bản thuần hoặc HTML hiển thị bên dưới trích dẫn.

JSON

{
  "type": "quote",
  "data": { "html": "The best way to predict the future is to invent it.", "author": "Alan Kay" }
}

table

Lưới dữ liệu. Hàng đầu tiên có thể được dùng làm tiêu đề; mỗi ô là html.

Trường	Kiểu	Bắt buộc	Mô tả
data	string[][]	Có	Mảng hai chiều của các chuỗi ô HTML. Hàng đầu tiên là hàng tiêu đề.
caption	string	Không	Chú thích văn bản thuần hoặc HTML hiển thị bên dưới bảng.
showDownload	boolean	Không	Hiển thị nút tải xuống trong đầu ra được kết xuất.

JSON

{
  "type": "table",
  "data": {
    "data": [["Name", "Type"], ["html", "string"], ["variant", "AlertVariant"]],
    "caption": "AlertData fields",
    "showDownload": false
  }
}

video

Khối video. Được xử lý qua callback videoUploader trên Editor.create.

Trường	Kiểu	Bắt buộc	Mô tả
url	string	Có	URL của tệp video hoặc liên kết nhúng YouTube/Vimeo.
caption	string	Không	Chú thích văn bản thuần hiển thị bên dưới trình phát.
alt	string	Không	Nhãn có thể truy cập cho phần tử video.
alignment	'center' \| 'left' \| 'right'	Không	Căn chỉnh ngang của trình phát. Một trong: center, left, right.

JSON

{
  "type": "video",
  "data": { "url": "/media/demo.mp4", "caption": "Product demo", "alignment": "center" }
}

Bắt đầu

Tham chiếu

API máy chủ

Hướng dẫn

Tham chiếu khối

Cấu trúc của khối

alert

audio

checklist

code

delimiter

header

image

list

paragraph

quote

table

video