문서 › 저장과 출력

HTML 소스 보기

source 버튼으로 HTML을 직접 보고 고치기.

source 버튼을 누르면 편집 영역이 HTML 코드 창으로 바뀝니다. 태그를 직접 고치거나 다른 곳에서 만든 HTML을 붙여 넣을 때 씁니다. 다시 누르면 고친 HTML이 에디터에 들어갑니다.

직접 써 보기

이 데모의 코드

createEditor('#editor', {
  toolbar: 'heading | bold italic | link | source',
});

사용법

단축키: Ctrl+Shift+U 로 열고 닫습니다.
HTML은 들여쓰기로 정리되어 보이고, 태그와 속성에 색이 칠해집니다.
코드 창에서 Tab 은 칸 이동 대신 공백 두 칸을 넣습니다.
닫으면 HTML을 허용 목록으로 걸러서 넣습니다. <script>, on* 속성 같은 것은 남지 않습니다. 넣은 결과는 실행 취소할 수 있습니다.
아무것도 고치지 않고 닫으면 내용이 그대로입니다(실행 취소 기록도 생기지 않습니다).
열려 있는 동안 쓸 수 있는 버튼은 source, preview, print, fullscreen, help, undo, redo 뿐입니다.

툴바 항목 이름은 source 입니다. board(기본)와 full 프리셋의 ⋯ 더보기 메뉴에 있습니다. 코드에서는 editor.toggleSource() 로 열고 닫고, source 이벤트로 열림(true)·닫힘(false)을 받습니다.

editor.on('source', (open) => {
  saveButton.disabled = open; // 소스 창을 닫고 저장하게
});
editor.toggleSource(true);

소스 창이 열린 채로 getHTML() 을 불러도 코드 창의 HTML을 걸러서 돌려주므로 내용을 잃지 않습니다.