editor

문서 › 블록 넣기

템플릿

자주 쓰는 글 틀을 메뉴에서 골라 넣기.

공지 양식, 상품 문의 답변, 회의록처럼 매번 같은 틀로 시작하는 글이 있으면 templates 옵션에 등록해 두고 메뉴에서 골라 넣습니다.

직접 써 보기

이 데모의 코드

createEditor('#editor', {
  toolbar: 'heading | bold | template | undo redo',
  templates: [
    {
      title: '공지',
      description: '제목, 날짜, 문의처',
      html: '<h2>공지 제목</h2><p><strong>일시:</strong> </p><p><strong>문의:</strong> </p>',
    },
    {
      title: '회의록',
      description: '참석자, 안건, 결정 사항',
      html: '<h3>참석자</h3><ul><li></li></ul><h3>안건</h3><ol><li></li></ol><h3>결정 사항</h3><p></p>',
    },
  ],
});

쓰는 법

  • template 버튼을 누르면 등록한 템플릿 목록이 나옵니다. description 은 제목 옆에 작게 보입니다.
  • 고른 템플릿의 HTML은 커서 자리에 들어갑니다. 글 전체를 바꾸지 않습니다.
  • slashMenu 가 켜져 있으면 템플릿이 / 메뉴에도 들어갑니다. 제목과 설명으로 찾을 수 있습니다.
  • templates 가 비어 있으면 메뉴에 "맞는 항목이 없어요" 안내만 보입니다.

코드로 넣기

버튼 없이 특정 시점에 틀을 넣고 싶으면 insertHTML 을 부릅니다. 글을 통째로 바꾸려면 setHTML 입니다.

editor.insertHTML('<h2>공지 제목</h2><p></p>');   // 커서 자리에 (걸러서) 넣기
editor.setHTML('<h2>공지 제목</h2><p></p>');      // 내용 전체 바꾸기

프리셋

template 은 full 프리셋의 ⋯ 메뉴에만 있습니다. board 를 쓰면서 템플릿을 쓰려면 toolbar 에 직접 넣으세요.

옵션

이름타입기본값설명
templates{ title, html, description? }[]-메뉴에 보일 템플릿 목록
templatetoolbar item-템플릿 메뉴 열기
slashMenubooleantrue/ 메뉴에도 템플릿 보이기