Erste Schritte

Installieren Sie das Paket, binden Sie es per id in ein beliebiges Containerelement ein und extrahieren Sie sauberes JSON, wann immer Sie es brauchen. Clepit hat keine Framework-Abhängigkeit und fügt sich daher ohne Wrapper in React, Vue, Svelte oder reines JavaScript ein.

Installieren

Fügen Sie @clepit/core zu Ihrem Projekt hinzu. Der Editor wird als einzelnes ESM-Bundle mit TypeScript-Definitionen ausgeliefert.

bun add @clepit/core

Einen Editor erstellen

Fügen Sie ein div hinzu und rufen Sie dann Editor.create mit den benötigten EditorConfig-Optionen auf. containerId ist das einzige Pflichtfeld; alles andere ist optional.

import { Editor } from '@clepit/core';

const editor = Editor.create({
  containerId: 'editor',
  onChange: data => console.log(data),
  placeholder: 'Start writing…',
  theme: 'auto',
});

Bearbeiten und speichern

Rufen Sie editor.data.extract() auf, nachdem Benutzer geschrieben haben, um in das EditorData-JSON-Format zu serialisieren. Die Nutzlast enthält ein { blocks }-Array mit jedem Block.

const data = editor.data.extract();
// data: EditorData
// {
//   time: 1745000000000,
//   version: '1.0.0',
//   blocks: [
//     { id: 'abc123', type: 'paragraph', data: { html: 'Hello world' } },
//     ...
//   ]
// }

Schreibgeschützt rendern

Verwenden Sie Renderer.render, um HTML aus EditorData auszugeben, die irgendwo gespeichert ist. Der Renderer speichert keinen Zustand. Er benötigt nur ein div mit einer containerId.

import { Renderer } from '@clepit/core';

Renderer.render({
  containerId: 'output',
  data: savedEditorData,
  margins: { bottom: 0, top: 0 },
});

Framework-agnostisch

@clepit/core hat keine Peer-Framework-Abhängigkeiten. Sowohl Editor.create als auch Renderer.render benötigen nur eine vollständige DOM-API: React, Vue, Svelte oder reines JavaScript funktionieren alle direkt.