스타일 메뉴

사이트에 "머리말", "안내 박스" 같은 정해진 모양이 있으면 styles 로 메뉴를 만드세요. 쓰는 사람은 글자색·크기를 하나하나 고르지 않고 이름으로 고르고, 저장되는 HTML에는 사이트의 클래스가 남습니다.

createEditor('#editor', {
  toolbar: 'styles | bold | bulletList',
  styles: [
    { title: '머리말', block: 'p', className: 'lead' },
    { title: '소제목', block: 'h3', className: 'sub' },
    { title: '안내 박스', block: 'p', className: 'box' },
    { title: '형광펜', inline: 'mark', className: 'hl' },
    { title: '흐린 글씨', inline: 'span', style: 'color: #868e96' },
  ],
  contentStyle: `
    .lead { font-size: 1.15em; color: #495057; }
    .sub { padding-left: 10px; border-left: 4px solid #2f6fed; }
    .box { padding: 12px 16px; background: #f1f3f5; border-radius: 8px; }
    .hl { background: #fff3bf; }
  `,
});

항목 만들기

styles 의 각 항목은 아래 값을 가집니다. className 과 style 중 하나는 있어야 메뉴에서 현재 스타일을 알아봅니다.

• title 메뉴에 보일 이름
• block 문단 스타일. 고른 문단을 이 태그로 바꾸고 클래스를 붙입니다 ('p', 'h2', 'h3' 등).
• inline 글자 스타일. 고른 글자를 이 태그로 감쌉니다 ('span', 'mark', 'small' 등). 아무것도 고르지 않았으면 하지 않습니다.
• className 붙일 클래스 하나. 글자·숫자·-·_ 로 40자까지.
• style 클래스 대신 넣을 인라인 CSS. 'color: #868e96' 처럼 속성: 값 을 ; 로 이어 쓰세요.

block 과 inline 을 둘 다 빼면 지금 문단(또는 목록 항목·제목·인용)에 클래스만 붙입니다.

켜고 끄기

이미 그 스타일이 붙은 곳에서 같은 항목을 다시 고르면 클래스가 빠집니다. 메뉴 버튼에는 커서 위치의 스타일 이름이 보이고, 메뉴에서도 체크 표시가 붙습니다. 메뉴 항목은 style 이 있으면 그 모양으로 미리 보여 줍니다.

툴바와 프리셋

• 툴바 항목 이름은 styles 입니다. full 프리셋의 ⋯ 메뉴에 들어 있고, board 에는 없으니 툴바 문자열에 직접 넣으세요.
• styles 옵션이 비어 있으면 툴바에 넣어도 버튼이 나오지 않습니다.

클래스와 보안 필터

82editor는 원래 붙여넣기나 setHTML 로 들어온 class 를 모두 지웁니다. styles 에 적은 클래스만 예외로 남깁니다. 그래서 다른 사이트에서 붙여 넣은 글에 같은 이름의 클래스가 있으면 그것도 남는다는 점만 알아 두세요.

클래스의 모양은 에디터가 모릅니다. 편집 화면에도 보이게 하려면 위 데모처럼 같은 CSS를 contentStyle 에 넣으세요.

저장되는 HTML

<p class="lead">머리말 스타일이 붙은 문단입니다.</p>
<h3 class="sub">소제목</h3>
<p>글자 일부를 고르고 <mark class="hl">형광펜</mark>을 고르면…</p>
<p><span style="color: #868e96">흐린 글씨</span></p>

옵션