メインコンテンツへスキップ

ガイド

埋め込み

設定

EditorConfig と RendererConfig はすべてのカスタマイズのエントリーポイントです。それぞれ Editor.create() または Renderer.render() に渡します。containerId（およびレンダラーの data）のみが必須で、他のすべてのオプションには安全なデフォルト値があります。

EditorConfig

EditorConfig を Editor.create() の唯一の引数として渡します。必須の containerId は既存の DOM 要素の id と一致する必要があります。

オプション型必須説明
containerIdstringはいエディターをホストする DOM 要素の ID。Editor.create() が呼び出される前に DOM に存在している必要があります。
maxHeightnumberいいえエディターの最大高さ（ピクセル）。高さの制限なしにするには 0（デフォルト）を設定します。
minHeightnumberいいえエディターの最小高さ（ピクセル）。デフォルトは 300 です。
onChange(data: EditorData) => voidいいえドキュメントが変更されるたびに発火するコールバック。完全な EditorData スナップショットを受け取ります。
onReady() => voidいいえエディターが完全に初期化され、API 呼び出しを受け付ける準備ができたときに発火するコールバック。
placeholderstringいいえエディターが空のときに表示されるプレースホルダーテキスト。デフォルトは 'Start writing...' です。
initialDataEditorDataいいえエディターのマウント時に読み込む事前入力済みの EditorData。
initialView'edit' | 'preview' | 'json'いいえ初期ビューモード。次のいずれか: edit、preview、json。デフォルトは 'edit' です。
allowJsonViewEditingbooleanいいえtrue の場合、JSON ビューは編集可能になり、変更はドキュメントに伝播します。デフォルトは false です。
marginsBlockMarginsいいえ各ブロックに適用されるグローバルな上下マージン（ピクセル）。ブロックレベルの設定が優先されます。
stylesEditorStylesいいえエディタークローム（ツールバー、ダイアログ、コントロール）の詳細な CSS カスタマイズ用の EditorStyles オブジェクト。
classNamesEditorClassNamesいいえエディタークローム要素に CSS クラス名を付けるための EditorClassNames オブジェクト。
imageUploaderUploadFunctionいいえ画像ファイルをアップロードし、公開 URL 文字列を返す非同期関数。
audioUploaderUploadFunctionいいえ音声ファイルをアップロードし、公開 URL 文字列を返す非同期関数。
videoUploaderUploadFunctionいいえ動画ファイルをアップロードし、公開 URL 文字列を返す非同期関数。
theme'auto' | 'light' | 'dark'いいえカラースキーム。次のいずれか: auto（システムに従う）、light、dark。デフォルトは auto です。
themeOverrides{ light?: ThemeTokens; dark?: ThemeTokens }いいえモードごとのトークンオーバーライド。完全なテーマを置き換えずに色をカスタマイズするために light および/または dark トークンマップを提供します。
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

RendererConfig を Renderer.render() の唯一の引数として渡します。containerId と data の両方が必須です。

オプション型必須説明
containerIdstringはいレンダリングされた出力が注入される DOM 要素の ID。
dataEditorDataはいレンダリングする EditorData ドキュメント。必須。
marginsBlockMarginsいいえレンダリングされた各ブロックに適用されるグローバルな上下マージン（ピクセル）。
stylesBlockStylesいいえレンダリングされた出力のブロックタイプごとの CSS カスタマイズ用の BlockStyles マップ。
classNamesBlockClassNamesいいえレンダリングされた出力のブロックタイプごとの CSS クラス名用の BlockClassNames マップ。
editorClassNamesEditorClassNamesいいえインタラクティブコンポーネントをレンダリングするブロック（例: 段落の tooltip classNames）に渡される EditorClassNames。
configsPartial<BlockTypeOutputConfigs>いいえブロックごとの OutputConfig オブジェクトの部分マップ。各エントリはブロックレベルのマージンと tooltip クラス名を設定できます。
theme'auto' | 'light' | 'dark'いいえカラースキーム。次のいずれか: auto、light、dark。
themeOverrides{ light?: ThemeTokens; dark?: ThemeTokens }いいえレンダリングされた出力のモードごとのトークンオーバーライド。
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 },
});

ブロックレベルのスタイリング

EditorConfig と RendererConfig はどちらも、ブロックタイプをキーとした styles、classNames、configs を受け付けます。ターゲットを絞った上書きに使用してください。完全なトークンリファレンスは Themes ページを参照してください。

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,
});