파일 첨부

공지 첨부 문서, 신청서 양식처럼 내려받을 파일을 글 안에 넣습니다. 파일은 내 서버에 올리고, 본문에는 파일 이름과 크기가 적힌 내려받기 단추가 들어갑니다.

createEditor('#editor', {
  toolbar: 'file | undo redo',
  fileMaxSize: 10 * 1024 * 1024,
  fileAccept: '.pdf,.hwp,.hwpx,.docx,.xlsx,.zip',
  // 데모라서 올리지 않고 가짜 주소를 돌려줍니다
  uploadFile: async (file) => 'https://example.com/files/' + encodeURIComponent(file.name),
});

넣는 방법

툴바의 파일 첨부(file) 단추를 누르고 파일을 고릅니다. 여러 개를 한 번에 고를 수 있고, 파일마다 "올리는 중…" 자리가 먼저 생겼다가 올리기가 끝나면 내려받기 단추로 바뀝니다. 올리지 못하면 그 자리는 지워지고 안내가 뜹니다.

올리는 길

• uploadFile 함수가 있으면 그것을 씁니다. 파일을 받아 내려받을 주소를 돌려주면 됩니다. 진행률은 두 번째 인자의 onProgress 로 알릴 수 있습니다.
• 없으면 uploadUrl 로 POST 합니다. 이미지와 같은 uploadField(기본 file), uploadHeaders 를 쓰고, 서버는 { "url": "…" } 를 돌려주면 됩니다.
• 둘 다 없으면 "파일을 올리려면 uploadFile 또는 uploadUrl 설정이 필요해요" 안내가 뜹니다. 첨부는 사진과 달리 base64 로 글에 넣지 않습니다.

createEditor('#editor', {
  toolbar: 'board | file',
  fileMaxSize: 20 * 1024 * 1024,
  fileAccept: '.pdf,.hwp,.hwpx,.docx,.xlsx,.zip',
  uploadFile: async (file, { onProgress }) => {
    const form = new FormData();
    form.append('file', file);
    const res = await fetch('/upload/attachment', { method: 'POST', body: form });
    if (!res.ok) throw new Error('업로드 실패');
    return (await res.json()).url;
  },
});

fileMaxSize 를 넘는 파일은 올리지 않고 "파일이 너무 커요 (최대 …)" 안내를 띄웁니다. fileAccept 는 파일 고르기 창의 형식 목록입니다. 받는 형식은 서버에서도 꼭 다시 확인하세요.

첨부를 올릴 때도 upload:start, upload:progress, upload:success, upload:error 이벤트가 납니다 (이벤트). 첨부 주소는 getUnusedUploads() 목록에 들어가지 않습니다.

저장되는 HTML

<div data-file="" style="margin: 0.6em 0">
  <a href="https://…/files/2026-신청서.hwp" download="2026-신청서.hwp" style="display: inline-flex; …">
    📎 <strong>2026-신청서.hwp</strong> <span style="color: #8c959f; font-size: 0.85em">48KB</span>
  </a>
</div>

에디터 안에서 첨부는 한 덩어리로 다뤄집니다. 지우거나 Alt+Shift+↑/↓ 로 옮길 수 있습니다.

툴바에서의 위치

file 은 board 와 full 프리셋의 ⋯ 더보기 메뉴에 있습니다.

옵션