Перейти к основному содержанию

Руководства

Встраивание

Настройка

EditorConfig и RendererConfig: точки входа для любой настройки. Передайте один из них в Editor.create() или Renderer.render() соответственно. Обязательны только containerId (и data для рендерера); все остальные параметры имеют безопасные значения по умолчанию.

EditorConfig

Передайте EditorConfig как единственный аргумент в Editor.create(). Обязательный containerId должен совпадать с id существующего элемента DOM.

ПараметрТипОбязательноОписание
containerIdstringДаID DOM-элемента, в котором будет размещён редактор. Должен существовать в DOM до вызова Editor.create().
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НетОбъект EditorStyles для тонкой CSS-настройки интерфейса редактора (панели инструментов, диалоги, элементы управления).
classNamesEditorClassNamesНетОбъект EditorClassNames для прикрепления имён CSS-классов к элементам интерфейса редактора.
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ДаID DOM-элемента, в который будет инжектирован отрендеренный вывод.
dataEditorDataДаДокумент EditorData для рендеринга. Обязателен.
marginsBlockMarginsНетГлобальные верхний и нижний отступы (в пикселях), применяемые к каждому отрендеренному блоку.
stylesBlockStylesНетКарта BlockStyles для CSS-настройки по типам блоков в отрендеренном выводе.
classNamesBlockClassNamesНетКарта BlockClassNames для имён CSS-классов по типам блоков в отрендеренном выводе.
editorClassNamesEditorClassNamesНетEditorClassNames, передаваемые блокам, отрисовывающим интерактивные компоненты (например, classNames подсказок для абзацев).
configsPartial<BlockTypeOutputConfigs>НетЧастичная карта объектов OutputConfig для каждого блока. Каждая запись может задавать отступы на уровне блока и имена классов подсказок.
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,
});