editor

문서 › 저장과 출력

미리보기와 인쇄

휴대폰·태블릿·PC 너비로 미리보기, 글만 인쇄하기.

preview 버튼은 저장될 HTML을 읽는 사람이 보는 모습으로 보여 줍니다. 휴대폰·태블릿·PC 너비를 바꿔 가며 사진과 표가 어떻게 보이는지 확인할 수 있습니다. print 버튼은 툴바 없이 글만 인쇄합니다.

직접 써 보기

이 데모의 코드

createEditor('#editor', {
  toolbar: 'heading | bold | image table | preview print',
  height: 300,
});

미리보기

  • 휴대폰(360px), 태블릿(768px), PC(창 너비) 중에서 고릅니다. 처음에는 PC로 열립니다.
  • 보여 주는 것은 getHTML() 결과입니다. 사진 크기 맞춤, 표 가로 스크롤 같은 저장되는 HTML 처리가 들어간 모습입니다.
  • 툴바 항목 이름은 preview 입니다. board(기본)와 full 프리셋의 ⋯ 더보기 메뉴에 있습니다.

인쇄

  • 보이지 않는 창에 getHTML() 결과와 간단한 인쇄용 CSS를 넣고 브라우저 인쇄 창을 엽니다. 툴바와 에디터 테두리는 나오지 않습니다.
  • 페이지 나누기(pageBreak)를 넣은 곳에서 다음 장으로 넘어갑니다.
  • 체크리스트는 ☐ / ☑ 로 찍힙니다.
  • 툴바 항목 이름은 print 이고, full 프리셋의 ⋯ 메뉴에만 들어 있습니다. 다른 프리셋에서는 toolbar 에 직접 넣으세요.

두 버튼 모두 읽기 전용과 HTML 소스 보기 중에도 쓸 수 있습니다. 코드에서 열려면 editor.exec('preview'), editor.exec('print') 를 부릅니다.

옵션

이름타입기본값설명
previewtoolbar item-휴대폰·태블릿·PC 너비 미리보기 창
printtoolbar item-글만 인쇄
exec('preview')method-코드로 미리보기 열기
exec('print')method-코드로 인쇄 창 열기