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
Hi {{name}}, your order shipped today.
Order number: {{order_no}}
Use the merge tag menu on the toolbar, or type {{today}} yourself.
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
mergeTagtoolbar item listsmergeTagsaslabel 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
fullpreset it sits in the ⋯ more menu.basicandboarddo 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
| Name | Type | Default | Description |
|---|---|---|---|
mergeTags | { label, value }[] | — | Menu label and the text that is saved |
mergeTag | toolbar item | — | The merge tag menu |