editor
English시작하기

문서 › 저장과 출력

메일용 HTML

getHTML({ inlineStyles: true }) 로 스타일을 style 속성에 써 넣기.

메일 프로그램은 <style> 과 외부 CSS를 대부분 버립니다. 뉴스레터나 안내 메일 본문을 에디터로 쓴다면 getHTML({ inlineStyles: true }) 로 받으세요. 에디터에서 보이는 글꼴·크기·색·여백을 태그마다 style 속성으로 적어 줍니다.

직접 써 보기

이 데모의 코드

createEditor('#editor', {
  toolbar: 'heading | bold italic | color | bulletList | link',
  contentStyle: 'font-family: Georgia, serif; font-size: 16px; line-height: 1.7;',
  onReady: (ed) => {
    const out = document.createElement('pre');
    out.style.cssText = 'white-space: pre-wrap; font-size: 12px; max-height: 220px; overflow: auto';
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.textContent = '메일용 HTML 보기';
    btn.onclick = () => { out.textContent = ed.getHTML({ inlineStyles: true }); };
    ed.statusEl.prepend(btn);
    ed.root.after(out);
  },
});

아래 버튼(저장되는 HTML)과 에디터 아래 버튼(메일용 HTML)을 눌러 비교해 보세요.

어떻게 동작하나

  • HTML을 화면 밖에 에디터 너비로 한 번 그린 뒤, 브라우저가 계산한 스타일을 읽습니다.
  • 글꼴, 크기, 굵기, 색, 줄간격, 정렬처럼 이어받는 값은 부모와 다를 때만 적습니다.
  • 배경색, 여백(margin·padding), 테두리, 모서리 둥글기처럼 이어받지 않는 값은 태그의 기본 모양과 다를 때만 적습니다.
  • 전체를 <div style="font-family: …; font-size: …; line-height: …; color: …"> 로 감쌉니다.
  • contentStyle 과 styles 메뉴의 클래스로 꾸민 모양도 계산된 값으로 들어갑니다.
const html = editor.getHTML({ inlineStyles: true });
await fetch('/newsletter', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ subject, html }),
});

옵션

이름타입기본값설명
getHTML({ inlineStyles })booleanfalsetrue 면 스타일을 style 속성으로 적은 HTML
contentStylestring-편집 영역 CSS. 메일용 HTML에도 계산되어 들어갑니다