Live-Editor zplCore Designer

Beispiel

Doku

Info

Der zplCore Designer ist der einbettbare Etiketten-Editor von zplCore.com: Design-JSON und Daten (JSON-Datensätze) rein, Design-JSON, ZPL, PDF und PNG raus. Was auf der Arbeitsfläche steht, druckt der Drucker – gerendert vom selben Engine. Auf dem Server wird nichts gespeichert, es gibt keine Anmeldung: Das Design bleibt in diesem Browser (lokaler Speicher), bis Sie es herunterladen. Demo-Grenzen: Anfragen bis 256 KB, 50 Datensätze, 300 Elemente, Bilder bis 192 KB, 300 Anfragen pro Minute. Gedruckt wird nicht im Editor, sondern von Ihrer Anwendung. Dokumentation · Lizenz

Den zplCore Designer einbetten

Betreiben Sie den Editor selbst – in Ihrer ASP.NET-Core-Anwendung (NuGet) oder als Container – und betten Sie ihn in jede Web- oder Desktop-Anwendung ein. Ihre Anwendung behält das Design, der Editor bearbeitet es nur.

dotnet add package ZplCore.Designer

// Program.cs
builder.Services.AddZplCoreDesigner(o =>
{
    o.Fonts.AddDirectory("fonts");            // optional: your TTF printer fonts (E:NAME.TTF)
    o.Limits.MaxRecordsPerRequest = 500;
});

var app = builder.Build();
app.UseAuthentication();
app.UseAuthorization();
app.MapZplCoreDesigner("/designer")
   .RequireAuthorization();                  // your auth – the designer brings none of its own

// editor UI: https://your-app/designer/   render API: /designer/api/…

docker run -d -p 8080:8080 --read-only --tmpfs /tmp \
  -e ZPLCORE_DESIGNER__AUTH__MODE=apikey \
  -e ZPLCORE_DESIGNER__AUTH__APIKEYS__0=<a key of at least 16 characters> \
  -e ZPLCORE_DESIGNER__ALLOWEDORIGINS__0=https://app.example.com \
  -v ./fonts:/fonts:ro \
  zplcore/designer

# editor UI: http://localhost:8080/designer/   health: /healthz, /readyz

<!-- Ihre Seite: ein Container mit Höhe -->
<div id="editor" style="height: 720px"></div>

<script src="https://labels.example.com/designer/sdk/zplcore-designer.js"></script>
<script type="module">
  const editor = await ZplCoreDesigner.mount('#editor', {
    baseUrl: 'https://labels.example.com/designer/',
    design,                                   // design document or label JSON
    data: [{ name: 'Anna', ean: '9506000134352' }],
    locale: 'de', theme: 'auto', unit: 'mm',
    requestHeaders: { 'X-Api-Key': key },     // container with API key (never in a URL)
    onChange: (doc) => save(doc)              // user edits, debounced
  });

  const zpl = await editor.getZpl();          // also getDesign(), getPdf(), getPng(), setData(rows) …
</script>

<script src="/designer/sdk/zplcore-designer.js"></script>   <!-- defines <zplcore-designer> -->

<zplcore-designer base-url="/designer/" locale="de" theme="auto"
                  style="display: block; height: 720px"></zplcore-designer>

<script>
  const el = document.querySelector('zplcore-designer');
  el.data = rows;
  el.addEventListener('zplcore-change', (e) => save(e.detail.design));
</script>

dotnet add package ZplCore.Designer.Blazor

@* the editor itself runs on a ZplCore.Designer host or the container *@
<ZplCoreDesigner @bind-Design="design" Data="rows" BaseUrl="/designer"
                 Locale="de" Theme="DesignerTheme.Auto" Height="80vh" />

@code {
    JsonObject? design;
    object[] rows = [new { name = "Anna", ean = "9506000134352" }];
}

Alle Optionen, die Render-API und die JavaScript-API: Dokumentation zum zplCore Designer · Lizenz: Preise