editor

Docs › Writing helpers

Merge tags

Placeholders such as {{name}} that your server fills in later, for mail and notice templates.

For mail and notice templates where each reader gets their own name or order number, insert placeholders such as {{name}}. In the editor they are chips that can't be edited; on save they are plain text for your server to fill in.

Try it

Code for this demo

createEditor('#editor', {
  toolbar: 'bold italic | link | mergeTag',
  mergeTags: [
    { label: 'Recipient', value: '{{name}}' },
    { label: 'Order number', value: '{{order_no}}' },
    { label: 'Today', value: '{{today}}' },
  ],
});

How it works

  • The mergeTag toolbar item lists mergeTags as label value. Picking one puts a chip at the caret.
  • Typing a known value in full turns it into a chip on the spot. Values in loaded content (value, setHTML) become chips too.
  • A chip is one piece: no editing inside, deleted as a whole. Text in code blocks and inline code is left alone.
  • In the full preset it sits in the ⋯ more menu. basic and board do not have it; add it to your toolbar.

Saved HTML

The chip markup is removed on save; only the value text is left.

<p>Hi {{name}}, your order shipped today.</p>
<p>Order number: {{order_no}}</p>

Filling them in on the server

Any value format works ({{name}}, %NAME%, [name] …); match your template engine. Always HTML-escape the values you put in.

const esc = (s) => String(s).replace(/[&<>"']/g, (c) => '&#' + c.charCodeAt(0) + ';');

function fill(html, data) {
  return html.replace(/\{\{(\w+)\}\}/g, (_, key) => esc(data[key] ?? ''));
}

fill(savedHtml, { name: 'Minsu', order_no: 'A-1024', today: '2026-10-21' });

Options

NameTypeDefaultDescription
mergeTags{ label, value }[]—Menu label and the text that is saved
mergeTagtoolbar item—The merge tag menu