저장되는 HTML

글을 저장할 때는 editor.getHTML() 로 HTML을 받습니다. 에디터 전용 표시는 빠지고 허용 목록으로 거른 HTML이 나옵니다. 휴대폰에서 넘치지 않도록 사진과 표에 몇 가지를 덧붙입니다.

createEditor('#editor', {
  toolbar: 'heading | bold | link image table',
  height: 320,
});

무엇이 바뀌어 나오나

• 빈 에디터는 빈 문자열 '' 을 돌려줍니다. 빈 <p><br></p> 가 저장되지 않습니다.
• 선택 표시, 업로드 중인 사진, 끌기 손잡이 같은 에디터 화면용 요소는 빠집니다.
• 사진: style 에 max-width: 100%; height: auto 가 붙고, 너비·높이 속성이 없으면 원본 크기로 width·height 를 적습니다. 보기 화면에서 사진이 넘치지 않고, 불러오는 동안 글이 덜컹거리지 않습니다.
• 표: <div data-table-wrap style="overflow-x: auto"> 로 감싸서 좁은 화면에서 옆으로 밀어 볼 수 있게 합니다. 저장한 글을 다시 불러오면 이 껍데기는 벗겨집니다.
• 지연 로딩: 두 번째 사진부터 loading="lazy" 가 붙습니다. 첫 사진은 보통 바로 보이는 자리라 붙이지 않습니다.
• linkRel 을 주면 http(s) 링크마다 rel 을 더합니다. 링크를 보세요.

<h2>여름 캠핑 후기</h2>
<p><img src="https://…/camp.jpg" alt="캠핑장" width="640" height="360" style="max-width: 100%; height: auto"></p>
<p><img src="https://…/fire.jpg" alt="모닥불" width="640" height="360" style="max-width: 100%; height: auto" loading="lazy"></p>
<div data-table-wrap="" style="overflow-x: auto"><table>…</table></div>

이 처리가 필요 없다면 responsiveOutput: false, lazyImages: false 로 끕니다. 편집하던 그대로의 HTML이 필요하면 editor.editHTML() 을 쓰세요. HTML 소스 보기와 자동 저장 초안은 이쪽을 씁니다.

textarea 와 함께 쓸 때

createEditor 에 <textarea> 를 넘기면 내용이 바뀔 때마다, 그리고 폼을 전송하기 직전에 textarea 값을 getHTML() 결과로 맞춥니다. 서버는 원래 받던 필드를 그대로 읽으면 됩니다. 자세한 예는 textarea와 폼 전송에 있습니다.

바뀔 때마다 받기

const editor = createEditor('#editor', {
  onChange: (html) => preview.innerHTML = html,
});
// 또는
editor.on('change', (html) => { /* … */ });

change 이벤트는 입력이 잠깐 멈춘 뒤 한 번 오고, 결과 HTML이 실제로 달라졌을 때만 옵니다. 글자만 필요하면 getText(), 마크다운이 필요하면 getMarkdown() (마크다운) 을 씁니다.

옵션