editor

문서 › 입력 도우미

/ 명령 메뉴

빈 줄에서 / 를 치면 제목, 표, 사진 같은 블록을 골라 넣는 메뉴.

빈 줄에서 / 를 치면 넣을 수 있는 블록 목록이 뜹니다. 툴바까지 마우스를 옮기지 않고 키보드로 바로 넣을 때 씁니다.

직접 써 보기

이 데모의 코드

createEditor('#editor', {
  toolbar: 'heading | bold italic | bulletList orderedList',
  templates: [
    {
      title: '회의록',
      description: '날짜, 참석자, 안건',
      html: '<h2>회의록</h2><p>날짜: </p><p>참석자: </p><ul><li>안건</li></ul>',
    },
  ],
});

쓰는 법

  • 문단에 / 하나만 있을 때 메뉴가 열립니다. 글 중간의 / 는 그냥 글자입니다.
  • 이어서 치는 글자로 목록을 거릅니다. 한글 이름, 영어 이름, 초성(ㅍ → 표), 비슷한 말(/유튜브 → 동영상, /접기 → 접은글)로 찾습니다.
  • ↑ ↓ 로 고르고 Enter 또는 Tab 으로 넣습니다. Esc 는 닫기입니다.
  • 고르면 친 /글자 는 지워지고 그 자리에 블록이 들어갑니다.
  • / 뒤에 스물네 글자가 넘거나 / 를 지우면 메뉴가 닫힙니다.

메뉴에 있는 것

본문, 제목 1~4, 글머리 기호, 번호 매기기, 체크리스트, 인용, 강조 박스, 접은글, 코드 블록, 표(3×3), 이미지, 동영상, 구분선, 쪽 나누기, 이모지, 특수문자, 목차, 날짜·시간. templates 옵션을 주면 템플릿이 목록 끝에 붙습니다(템플릿 설명도 검색됩니다).

툴바에 없는 항목도 메뉴에는 나옵니다. 툴바를 짧게 두고 나머지는 / 메뉴로 넣게 하는 구성도 됩니다.

옵션

이름타입기본값설명
slashMenubooleantruefalse 면 / 를 쳐도 메뉴가 뜨지 않습니다.
templates{ title, html, description? }[]—메뉴 끝에 붙는 템플릿. 고르면 html 을 넣습니다.