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

Hướng dẫn

Nhúng

Nhúng

Tích hợp trình soạn thảo hoặc bộ hiển thị Clepit vào bất kỳ ứng dụng nào đều đơn giản: một DOM container là điểm kiểm soát duy nhất.

Gắn kết trình soạn thảo

Đặt id cho phần tử container, gọi `Editor.create({ containerId, ... })`, giữ lại `EditorAPI` được trả về và gọi `Editor.destroy(containerId)` khi dọn dẹp.

TypeScript
import { Editor } from '@clepit/core';
import type { EditorAPI } from '@clepit/core';

// 1. Give your container a stable id
// <div id="my-editor"></div>

// 2. Create the editor and hold the returned API
const editor: EditorAPI = Editor.create({
  containerId: 'my-editor',
  minHeight: 400,
  placeholder: 'Start writing...',
  theme: 'auto',
  onChange: data => console.log(data),
  onReady: () => console.log('Editor ready'),
});

// 3. Extract content any time
const data = editor.data.extract();

// 4. Destroy on teardown (e.g. component unmount)
Editor.destroy('my-editor');

Hiển thị đầu ra ở chế độ chỉ đọc

Gọi `Renderer.render({ containerId, data })`. Ví dụ bên dưới cho thấy mẫu React thực tế từ component `DocsRenderer`: `useId` tạo ra id container duy nhất và `useEffect` kích hoạt quá trình hiển thị.

TSX
import { Renderer } from '@clepit/core';
import type { EditorData } from '@clepit/core';
import { useEffect, useId } from 'react';

type Props = { content: EditorData };

const ReadOnlyView = ({ content }: Props) => {
  // useId produces a stable, unique id per component instance
  const containerId = useId().replace(/[^a-z0-9]/gi, '');

  useEffect(() => {
    Renderer.render({
      containerId,
      data: content,
      margins: { bottom: 0, top: 0 },
    });
  }, [containerId, content]);

  return <div id={containerId} />;
};

Hiển thị chỉ trên client / SSR

Cả Editor và Renderer đều hoạt động trên DOM, vì vậy chúng chỉ chạy trong trình duyệt: hãy dùng effects (`useEffect`) hoặc directive `'use client'`. Chúng không chạy trong SSR.

Đừng gọi `Editor.create` hoặc `Renderer.render` bên ngoài `useEffect` hoặc bên trong server component; điều này sẽ gây ra lỗi "document is not defined".

Không phụ thuộc framework

Gói lõi @clepit/core là TypeScript thuần túy, không có phụ thuộc React. Dù bạn dùng React, Vue, Svelte, Angular hay vanilla TS/JS, tất cả đều dùng chung một API.