Templatical

Deutsch

English

Deutsch

English

Erscheinungsbild

Installation ​

Das Templatical SDK kann über npm installiert oder direkt über CDN-Script-Tag eingebunden werden.

npm ​

Installieren Sie das SDK mit Ihrem bevorzugten Paketmanager:

bash
# npm
npm install @templatical/embedded

# yarn
yarn add @templatical/embedded

# pnpm
pnpm add @templatical/embedded

# bun
bun add @templatical/embedded

Importieren Sie es dann in Ihrem JavaScript- oder TypeScript-Code:

javascript
import { init } from '@templatical/embedded';

Das npm-Paket wird als ES-Modul mit vollständigen TypeScript-Typdefinitionen ausgeliefert.

CDN ​

Binden Sie das SDK direkt über <script>- und <link>-Tags ein. Kein Build-Schritt erforderlich.

html
<link rel="stylesheet" href="https://templatical.com/sdk/templatical.css">
<script src="https://templatical.com/sdk/templatical.js"></script>

Bei Laden über CDN ist das SDK als globales Templatical-Objekt auf window verfügbar:

javascript
const editor = await Templatical.init({
  container: '#email-editor',
  auth: {
    url: 'https://your-app.com/api/token',
  },
});

Das CDN-Bundle ist vollständig eigenständig — es enthält alle Abhängigkeiten und erfordert keine zusätzliche Einrichtung.

Anforderungen ​

  • Browser: Chrome 80+, Firefox 80+, Safari 14+, Edge 80+
  • JavaScript: ES2020+-Unterstützung erforderlich
  • Container: Muss definierte Breite und Höhe haben (der Editor füllt seinen Container)

Framework-Integration ​

Im Folgenden finden Sie vollständige Integrationsbeispiele für beliebte Frameworks. Jedes Beispiel behandelt Initialisierung, Aufräumen und grundlegende Ereignisbehandlung.

html
<div id="email-editor"></div>

<link rel="stylesheet" href="https://templatical.com/sdk/templatical.css">
<script src="https://templatical.com/sdk/templatical.js"></script>
<script>
  var editor = Templatical.init({
    container: '#email-editor',
    auth: {
      url: 'https://your-app.com/api/token',
    },
    onSave: function (result) {
      console.log(result.html);
    },
  });
</script>

Aufräumen ​

Rufen Sie immer unmount() auf, wenn Sie den Editor von der Seite entfernen, um Event-Listener, Timer und DOM-Elemente ordnungsgemäß aufzuräumen:

javascript
// Auf der Editor-Instanz
editor.unmount();

// Oder mit dem benannten Export (entfernt die aktuelle Instanz)
import { unmount } from '@templatical/embedded';
unmount();

Dies ist besonders wichtig in Single-Page-Anwendungen, in denen die Editor-Komponente während des Anwendungslebenszyklus mehrfach ein- und ausgehängt werden kann.

TypeScript-Unterstützung ​

Das npm-Paket enthält vollständige TypeScript-Typdefinitionen. Alle Konfigurationsoptionen, Callback-Payloads und Instanzmethoden sind vollständig typisiert:

typescript
import { init, unmount } from '@templatical/embedded';
import type {
  TemplaticalConfig,
  TemplaticalInstance,
  SaveResult,
  Template,
  TemplateContent,
  ThemeOverrides,
  Placeholder,
  FontsConfig,
  CustomFont,
  AuthConfig,
  ViewportSize,
  SdkError,
} from '@templatical/embedded';

Nächste Schritte ​

Nach der Installation fahren Sie mit der Konfiguration fort, um mehr über alle verfügbaren Optionen, Callbacks und die Instanz-API zu erfahren.