문서 › 블록 넣기
HTML 블록
상세페이지처럼 미리 만든 HTML을 class와 스타일째 넣기.
쇼핑몰 상세페이지, 배너, 직접 짠 레이아웃처럼 이미 만들어 둔 HTML을 그대로 넣을 때 씁니다. 보통 내용과 달리 HTML 블록 안에서는 class와 거의 모든 CSS 속성이 남습니다.
직접 써 보기
아래 상자를 누르면 막대가 뜹니다. "HTML 고치기"로 내용을 바꿔 보세요.
가을 할인
모든 상품 20%
-20%
이 데모의 코드
createEditor('#editor', {
toolbar: 'heading | bold | htmlBlock | source | undo redo',
});쓰는 법
htmlBlock버튼을 누르면 HTML을 붙여 넣는 창이 열립니다. "넣기"를 누르면 커서 자리에 블록이 들어갑니다.- 편집 화면에서 HTML 블록은 한 덩어리입니다. 안의 글자를 바로 고칠 수 없고, 누르면 블록 전체가 골라지면서 막대가 뜹니다.
- 막대: HTML 고치기(같은 창에서 고치고 적용, 또는 삭제), 위로 옮기기, 아래로 옮기기, 삭제.
무엇이 남고 무엇이 빠지나
| HTML 블록 안 | 보통 내용 | |
|---|---|---|
| class | 남음 (한 요소에 12개까지) | 빠짐 (styles 에 등록한 것만 남음) |
| CSS 속성 | 거의 모두 남음 (grid, gradient 등) | 허용 목록의 속성만 |
section article header footer aside main center | 남음 | 태그는 벗기고 글만 남음 |
script style form input button svg 등 | 내용째 빠짐 | 내용째 빠짐 |
onclick 같은 이벤트 속성 | 빠짐 | 빠짐 |
javascript: 주소, CSS의 url()·expression() | 빠짐 | 빠짐 |
| iframe | 허용된 사이트만 (allowedIframeHosts) | 허용된 사이트만 |
저장되는 HTML
<div data-html="">
<section class="promo" style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; …">
…
</section>
</div>서버에서 한 번 더 거를 때 div[data-html] 안의 class와 style을 지우지 않도록 규칙을 맞춰 주세요 (보안).
editor.exec('htmlBlock'); // HTML 블록 창 열기프리셋
htmlBlock 은 full 프리셋의 ⋯ 메뉴에만 있습니다. 방문자가 쓰는 게시판보다는 관리자 화면에 어울립니다.
옵션
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
htmlBlock | toolbar item | - | HTML 블록 넣기·고치기 |
allowedIframeHosts | string[] | - | 블록 안 iframe도 기본 동영상 사이트·구글 지도와 이 목록의 주소만 남습니다 |