Cấu hình
EditorConfig và RendererConfig là các điểm vào cho mọi tùy chỉnh. Truyền một trong hai vào Editor.create() hoặc Renderer.render() tương ứng. Chỉ có containerId (và data cho renderer) là bắt buộc, tất cả các tùy chọn khác đều có giá trị mặc định an toàn.
EditorConfig
Truyền EditorConfig làm đối số duy nhất cho Editor.create(). containerId bắt buộc phải khớp với id của một phần tử DOM hiện có.
| Tùy chọn | Kiểu | Bắt buộc | Mô tả |
|---|---|---|---|
| containerId | string | Có | ID của phần tử DOM sẽ chứa trình soạn thảo. Phải tồn tại trong DOM trước khi Editor.create() được gọi. |
| maxHeight | number | Không | Chiều cao tối đa của trình soạn thảo theo pixel. Đặt thành 0 (mặc định) để không giới hạn chiều cao. |
| minHeight | number | Không | Chiều cao tối thiểu của trình soạn thảo theo pixel. Mặc định là 300. |
| onChange | (data: EditorData) => void | Không | Callback được kích hoạt mỗi khi tài liệu thay đổi. Nhận toàn bộ bản chụp EditorData. |
| onReady | () => void | Không | Callback được kích hoạt khi trình soạn thảo được khởi tạo hoàn toàn và sẵn sàng nhận các lời gọi API. |
| placeholder | string | Không | Văn bản giữ chỗ hiển thị khi trình soạn thảo trống. Mặc định là 'Start writing...'. |
| initialData | EditorData | Không | EditorData được điền sẵn để tải khi trình soạn thảo gắn kết. |
| initialView | 'edit' | 'preview' | 'json' | Không | Chế độ xem ban đầu. Một trong: edit, preview, json. Mặc định là 'edit'. |
| allowJsonViewEditing | boolean | Không | Khi true, chế độ xem JSON có thể chỉnh sửa và các thay đổi được truyền ngược lại vào tài liệu. Mặc định là false. |
| margins | BlockMargins | Không | Lề trên và dưới toàn cục (theo pixel) áp dụng cho mỗi khối. Cấu hình mỗi khối được ưu tiên. |
| styles | EditorStyles | Không | Đối tượng EditorStyles để tùy chỉnh CSS chi tiết cho giao diện trình soạn thảo (thanh công cụ, hộp thoại, điều khiển). |
| classNames | EditorClassNames | Không | Đối tượng EditorClassNames để gắn tên lớp CSS vào các phần tử giao diện trình soạn thảo. |
| imageUploader | UploadFunction | Không | Hàm bất đồng bộ tải lên tệp hình ảnh và trả về chuỗi URL công khai. |
| audioUploader | UploadFunction | Không | Hàm bất đồng bộ tải lên tệp âm thanh và trả về chuỗi URL công khai. |
| videoUploader | UploadFunction | Không | Hàm bất đồng bộ tải lên tệp video và trả về chuỗi URL công khai. |
| theme | 'auto' | 'light' | 'dark' | Không | Bảng màu. Một trong: auto (theo hệ thống), light, dark. Mặc định là auto. |
| themeOverrides | { light?: ThemeTokens; dark?: ThemeTokens } | Không | Ghi đè token theo chế độ. Cung cấp bản đồ token light và/hoặc dark để tùy chỉnh màu sắc mà không cần thay thế toàn bộ chủ đề. |
TypeScript
import { Editor } from '@clepit/core';
const editor = Editor.create({
containerId: 'editor',
minHeight: 400,
placeholder: 'Start writing...',
theme: 'auto',
onChange: data => console.log(data),
onReady: () => console.log('Editor ready'),
imageUploader: async file => {
const form = new FormData();
form.append('file', file);
const res = await fetch('/api/upload', { body: form, method: 'POST' });
const { url } = await res.json();
return url;
},
});RendererConfig
Truyền RendererConfig làm đối số duy nhất cho Renderer.render(). Cả containerId và data đều là bắt buộc.
| Tùy chọn | Kiểu | Bắt buộc | Mô tả |
|---|---|---|---|
| containerId | string | Có | ID của phần tử DOM nơi đầu ra được kết xuất sẽ được chèn vào. |
| data | EditorData | Có | Tài liệu EditorData cần kết xuất. Bắt buộc. |
| margins | BlockMargins | Không | Lề trên và dưới toàn cục (theo pixel) áp dụng cho mỗi khối được kết xuất. |
| styles | BlockStyles | Không | Bản đồ BlockStyles để tùy chỉnh CSS theo từng loại khối của đầu ra được kết xuất. |
| classNames | BlockClassNames | Không | Bản đồ BlockClassNames cho tên lớp CSS theo từng loại khối trên đầu ra được kết xuất. |
| editorClassNames | EditorClassNames | Không | EditorClassNames được truyền đến các khối kết xuất các thành phần tương tác (ví dụ: classNames tooltip cho các đoạn văn). |
| configs | Partial<BlockTypeOutputConfigs> | Không | Bản đồ một phần của các đối tượng OutputConfig theo từng khối. Mỗi mục có thể đặt lề cấp khối và tên lớp tooltip. |
| theme | 'auto' | 'light' | 'dark' | Không | Bảng màu. Một trong: auto, light, dark. |
| themeOverrides | { light?: ThemeTokens; dark?: ThemeTokens } | Không | Ghi đè token theo chế độ cho đầu ra được kết xuất. |
TypeScript
import { Renderer } from '@clepit/core';
import type { EditorData } from '@clepit/core';
const data: EditorData = await fetch('/api/content/123').then(r => r.json());
Renderer.render({
containerId: 'output',
data,
theme: 'auto',
margins: { bottom: 16, top: 16 },
});Tạo kiểu cấp khối
Cả EditorConfig và RendererConfig đều chấp nhận styles, classNames và configs được khóa theo loại khối. Sử dụng chúng cho các ghi đè có mục tiêu; xem trang Themes để biết tham chiếu đầy đủ theo token.
TypeScript
import { Editor, Renderer } from '@clepit/core';
import type { BlockStyles, BlockClassNames, EditorStyles } from '@clepit/core';
const editorStyles: EditorStyles = {
blockToolbar: { container: { borderRadius: '8px' } },
};
const blockStyles: BlockStyles = {
header: { h1: { fontFamily: 'Georgia, serif' } },
paragraph: { lineHeight: '1.75' },
table: { cell: { padding: '8px 12px' } },
};
const blockClassNames: BlockClassNames = {
paragraph: 'prose-paragraph',
header: { h1: 'prose-h1', h2: 'prose-h2' },
alert: { info: 'alert-info', error: 'alert-error' },
};
Editor.create({
containerId: 'editor',
styles: editorStyles,
});
Renderer.render({
containerId: 'output',
data,
styles: blockStyles,
classNames: blockClassNames,
});