@richhtmleditor/templates

Document templates plugin for Rich HTML Editor. Adds an Insert Template toolbar tool and a Save as Template button so users can browse, insert, and manage reusable document templates — including templates they design themselves.

Current release: 1.2.9 — Depends on @richhtmleditor/core ^1.2.9.

Repository: github.com/rajkishorsahu89/richhtmleditor

Demo: richhtmleditor.stackkitlabs.com — demo · guide · API

What's new in 1.2.9

• User-defined templates — allowUserTemplates: true enables users to save the current editor content as a named, categorised template (stored in localStorage)
• Save as Template toolbar button — saveAsTemplate tool opens a name/category dialog; enforces configurable maxUserTemplates limit (default 20)
• My Templates tab — two-tab modal: "All" (built-in + user) and "My Templates (N/20)"; delete button with custom confirmation dialog on each user card
• Export / Import JSON — download all user templates as my-templates.json; import from file (merges, skips duplicates)
• Category filter chips — chips appear below search when templates span 3+ categories; chips reset on tab switch
• Append vs Replace — footer now has Append (adds template after current content) and Replace (replaces all content) buttons
• Custom toast notifications — replaces all native alert() and confirm() calls with styled in-app toasts (success / error / info) and a custom delete-confirmation modal

What's in 1.2.8

• createTemplatesPlugin — registers the insertTemplate toolbar tool
• Template gallery — grid of pre-built templates with live HTML preview thumbnails
• Search — real-time filter by name, description, or category
• Variable substitution — {{variable}} placeholders resolved at insert time via variables map or getVariables callback

Community feature — no enterprise licence required.

Keywords: richhtmleditor templates document report letter wysiwyg

Install

npm install @richhtmleditor/templates
# Requires @richhtmleditor/core (via framework wrapper or direct install).

Usage

import { createEditor } from "@richhtmleditor/core";
import { createTemplatesPlugin } from "@richhtmleditor/templates";

const editor = createEditor({
  element: host,
  toolbar: { preset: "full" },
  plugins: [
    createTemplatesPlugin({
      templates: myTemplates,
      allowUserTemplates: true,
      maxUserTemplates: 20
    })
  ]
});

Angular

import { createTemplatesPlugin } from "@richhtmleditor/templates";

plugins = [createTemplatesPlugin({
  templates: this.myTemplates,
  allowUserTemplates: true
})];

<richhtmleditor [plugins]="plugins" [toolbar]="{ preset: 'full' }" />

Custom templates with variable substitution

createTemplatesPlugin({
  templates: [
    {
      id: "welcome",
      label: "Welcome Email",
      category: "Email",
      description: "Greeting for new users",
      content: "<p>Dear {{firstName}},</p><p>Welcome to {{company}}!</p>"
    }
  ],
  variables: { company: "Acme Corp" },
  getVariables: (tmpl) => ({ firstName: currentUser.firstName }),
  onInsert: (tmpl, resolvedHtml) => console.log("Inserted:", tmpl.label)
})

User-defined templates

createTemplatesPlugin({
  templates: builtinTemplates,
  allowUserTemplates: true,      // enables Save as Template button
  maxUserTemplates: 20,          // default: 20
  userTemplateStorageKey: "my-app-templates",  // default: "de-user-templates"
  onSaveTemplate: (tpl) => console.log("Saved:", tpl.label),
  onDeleteTemplate: (id) => console.log("Deleted:", id)
})

API

createTemplatesPlugin(options)

Returns an EditorPlugin that registers the insertTemplate (and optionally saveAsTemplate) toolbar tools.

| Option | Type | Default | Description | | --- | --- | --- | --- | | templates | Template[] | [] | Built-in templates shown in the gallery. | | variables | Record<string, string> | {} | Static variable values for {{key}} substitution. | | getVariables | (tmpl) => Record<string, string> | — | Dynamic variable resolver called at insert time. | | onInsert | (tmpl, html) => void | — | Called after a template is inserted. | | allowUserTemplates | boolean | false | Enable user-defined template save/delete/export/import. | | maxUserTemplates | number | 20 | Maximum number of user-defined templates. | | userTemplateStorageKey | string | "de-user-templates" | localStorage key for persisting user templates. | | onSaveTemplate | (tpl: UserTemplate) => void | — | Called after a user template is saved. | | onDeleteTemplate | (id: string) => void | — | Called after a user template is deleted. |

Template

| Field | Type | Description | | --- | --- | --- | | id | string | Unique template identifier. | | label | string | Display name in the gallery. | | content | string | HTML content. Supports {{variable}} placeholders. | | category | string? | Optional category for filter chips. | | description | string? | Short description shown below the preview thumbnail. |

UserTemplate

Extends Template with:

| Field | Type | Description | | --- | --- | --- | | isUserDefined | true | Marks this as a user-created template. | | createdAt | number | Unix timestamp (ms) when the template was saved. |

Utility functions

import { applyVariables, extractVariableNames } from "@richhtmleditor/templates";

// Replace {{key}} placeholders
const html = applyVariables(template.content, { firstName: "Alice" });

// List all placeholder names in a template
const names = extractVariableNames(template.content); // ["firstName", "company"]

Related packages

• @richhtmleditor/core — editor engine and plugins API.
• @richhtmleditor/themes — shared CSS.
• @richhtmleditor/export — DOCX/PDF export plugin.
• @richhtmleditor/angular — Angular wrapper.
• @richhtmleditor/react — React wrapper.

License

MIT