Tham chiếu API
Các export công khai từ @clepit/core. Mỗi ký hiệu bên dưới cung cấp một chữ ký có kiểu và một ví dụ sử dụng tối thiểu.
Editor
Lớp trình soạn thảo cốt lõi. Editor cung cấp hai phương thức tĩnh công khai: create (bộ factory chính) và destroy. Phương thức create() trả về một đối tượng EditorAPI, thông qua đó tất cả các phương thức của thực thể đều có thể truy cập sau khi trình soạn thảo được gắn kết.
| Phương thức | Chữ ký | Mô tả |
|---|---|---|
| Editor.create | Editor.create(config: EditorConfig): EditorAPI | Tạo một thực thể trình soạn thảo mới và gắn nó vào phần tử DOM với containerId được cung cấp. |
| Editor.destroy | Editor.destroy(containerId: string): void | Phương thức destroy() trên đối tượng EditorAPI gọi Editor.destroy() cho thực thể này. |
| Phương thức | Chữ ký | Mô tả |
|---|---|---|
| data.extract | data.extract(): EditorData | Trích xuất dữ liệu khối hiện tại từ một thực thể trình soạn thảo dưới dạng EditorData an toàn cho JSON. |
| data.set | data.set(data: EditorData): void | Thay thế toàn bộ danh sách khối bằng một payload dữ liệu mới. Kích hoạt kết xuất lại toàn bộ. |
| data.clear | data.clear(): void | Xóa cả nội dung khối và dữ liệu trạng thái đã lưu. |
| data.clearContent | data.clearContent(): void | Chỉ xóa các khối, để nguyên dữ liệu store. |
| data.clearStorage | data.clearStorage(): void | Chỉ xóa dữ liệu store, để nguyên các khối hiện tại. |
| blocks.insert | blocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number): HTMLElement | null | Chèn một khối tại index đã cho. Chấp nhận cùng cấu trúc dữ liệu với loại khối đích. |
| blocks.convert | blocks.convert(blockId: string, newType: BlockToolType): void | Chuyển đổi một khối sang loại mới tại chỗ. |
| blocks.remove | blocks.remove(index: number): void | Xóa khối tại index đã cho. |
| blocks.move | blocks.move(fromIndex: number, toIndex: number): void | Di chuyển một khối từ chỉ số này sang chỉ số khác. |
| blocks.update | blocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): void | Cập nhật dữ liệu của một khối hiện có tại chỗ. Loại không thay đổi. |
| blocks.get | blocks.get(blockId: string): EditorData['blocks'][number] | null | Lấy một khối theo ID của nó. Trả về null nếu không tìm thấy. |
| blocks.getAll | blocks.getAll(): EditorData['blocks'] | Trả về dữ liệu của tất cả các khối dưới dạng mảng. |
| blocks.count | blocks.count(): number | Trả về số lượng khối trong trình soạn thảo. |
| focus | focus(): void | Di chuyển tiêu điểm vào trình soạn thảo, tập trung vào khối đầu tiên. |
| blur | blur(): void | Xóa bất kỳ tiêu điểm đang hoạt động nào bên trong trình soạn thảo. |
| destroy | destroy(): void | Phương thức destroy() trên đối tượng EditorAPI gọi Editor.destroy() cho thực thể này. |
| selection.get | selection.get(): Selection | null | Trả về đối tượng lựa chọn cửa sổ hoặc null. |
| selection.set | selection.set(selection: Selection): void | Đặt lựa chọn cửa sổ thành đối tượng Selection được cung cấp. |
| selection.clear | selection.clear(): void | Xóa tất cả các phạm vi khỏi lựa chọn cửa sổ. |
| ui.showBlockMenu | ui.showBlockMenu(block: HTMLElement): void | Hiển thị menu loại khối cho phần tử DOM khối đã cho. |
| ui.hideBlockMenu | ui.hideBlockMenu(): void | Ẩn menu loại khối nếu nó đang mở. |
| ui.showToolbar | ui.showToolbar(x: number, y: number): void | Hiển thị thanh công cụ nội tuyến tại tọa độ x, y khung nhìn được cung cấp. |
| ui.hideToolbar | ui.hideToolbar(): void | Ẩn thanh công cụ nội tuyến nếu nó đang hiển thị. |
| view.getCurrentView | view.getCurrentView(containerId: string): EditorView | null | Trả về view hiện tại (edit, preview hoặc json) cho containerId đã cho. |
| view.switchView | view.switchView(containerId: string, view: EditorView): void | Chuyển trình soạn thảo sang view được chỉ định: edit, preview hoặc json. |
Ví dụ sử dụng điển hình
TypeScript
import { Editor } from '@clepit/core';
const editor = Editor.create({
containerId: 'editor',
theme: 'auto',
placeholder: 'Start writing...',
minHeight: 300,
});
// Insert a block
editor.blocks.insert('paragraph', { html: 'Hello world' }, 0);
// Extract data
const data = editor.data.extract();
// Switch view
editor.view.switchView('editor', 'preview');
// Tear down
editor.destroy();Renderer
Một lớp chuyển đổi dữ liệu khối đã lưu thành HTML chỉ đọc bên trong một phần tử DOM. Lớp này có một phương thức tĩnh công khai: render().
| Phương thức | Chữ ký | Mô tả |
|---|---|---|
| Renderer.render | Renderer.render(config: RendererConfig): HTMLElement | Kết xuất JSON khối đã lưu vào một vùng chứa dưới dạng HTML chỉ đọc. Dùng cái này ở bất cứ đâu bạn muốn hiển thị nội dung mà không có khả năng chỉnh sửa. |
Ví dụ sử dụng điển hình
TypeScript
import { Renderer } from '@clepit/core';
Renderer.render({
containerId: 'output',
data,
theme: 'auto',
margins: { bottom: 12, top: 0 },
});StyleManager
Một lớp tập trung quản lý hệ thống chủ đề. Cung cấp ba phương thức tĩnh công khai hữu ích cho người dùng: subscribe (cho các thay đổi chủ đề cấp hệ điều hành), getResolvedTheme (để đọc chủ đề hệ điều hành hiện tại) và injectStyles (để chèn CSS tùy chỉnh).
| Phương thức | Chữ ký | Mô tả |
|---|---|---|
| StyleManager.subscribe | StyleManager.subscribe(cb: (theme: 'light' | 'dark') => void): () => void | Đăng ký theo dõi các thay đổi token chủ đề tại thời gian chạy. Listener kích hoạt mỗi khi theme hoặc themeOverrides thay đổi. |
| StyleManager.getResolvedTheme | StyleManager.getResolvedTheme(): 'light' | 'dark' | Đọc chủ đề hệ điều hành hiện tại ("light" hoặc "dark"). Trả về "light" nếu matchMedia không khả dụng. |
| StyleManager.injectStyles | StyleManager.injectStyles(styleId: string, styles: string): boolean | Chèn chuỗi CSS vào document.head (sử dụng styleId duy nhất). Trả về false nếu đã tồn tại, true nếu không. |
Ví dụ sử dụng điển hình
TypeScript
import { StyleManager } from '@clepit/core';
// React to OS theme changes
const unsubscribe = StyleManager.subscribe(theme => {
console.log('OS theme:', theme); // 'light' | 'dark'
});
// Read current OS theme
const current = StyleManager.getResolvedTheme();
// Inject custom CSS once
StyleManager.injectStyles('my-overrides', `
.clepit-editor { font-family: 'Inter', sans-serif; }
`);
// Unsubscribe when done
unsubscribe();