넣을 값 (머지 태그)

안내 메일, 알림 문자 템플릿처럼 받는 사람마다 이름·주문 번호가 달라지는 글을 쓸 때, {{name}} 같은 자리 표시를 넣습니다. 에디터에서는 고칠 수 없는 칩으로 보이고, 저장할 때는 글자 그대로 나가서 서버가 채웁니다.

createEditor('#editor', {
  toolbar: 'bold italic | link | mergeTag',
  mergeTags: [
    { label: '받는 사람', value: '{{name}}' },
    { label: '주문 번호', value: '{{order_no}}' },
    { label: '오늘 날짜', value: '{{today}}' },
  ],
});

쓰는 법

• mergeTag 툴바 항목(넣을 값)에 mergeTags 목록이 이름 값 으로 보입니다. 고르면 커서 자리에 칩이 들어갑니다.
• 목록에 있는 값을 직접 끝까지 치면 그 자리에서 칩이 됩니다. 불러온 글(value, setHTML) 안의 값도 칩으로 보입니다.
• 칩은 한 덩어리라서 안을 고칠 수 없고 한 번에 지워집니다. 코드 블록과 인라인 코드 안의 글자는 칩이 되지 않습니다.
• full 프리셋에서는 ⋯ 더 보기 메뉴 안에 있습니다. basic, board 에는 없으니 툴바에 직접 넣으세요.

저장되는 HTML

칩 표시는 저장할 때 벗겨지고 값 글자만 남습니다.

<p>{{name}} 님, 주문하신 상품이 오늘 발송되었습니다.</p>
<p>주문 번호: {{order_no}}</p>

서버에서 채우기

값의 모양은 자유입니다({{name}}, %NAME%, [이름]…). 서버의 템플릿 방식에 맞추세요. 채우는 값은 꼭 HTML 이스케이프하세요.

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: '김민수', order_no: 'A-1024', today: '2026-10-21' });

옵션