본문 모양 맞추기

쓰는 화면과 게시판 보기 화면이 다르게 보이면 쓰는 사람이 헷갈립니다. contentStyle 로 편집 영역에 보기 화면의 CSS를 넣고, 글꼴·크기·줄간격·글자색 메뉴의 목록은 사이트에 맞게 바꾸세요.

createEditor('#editor', {
  toolbar: 'fontFamily fontSize lineHeight | bold color',
  contentStyle: `
    font-family: 'Malgun Gothic', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    p { margin: 0 0 1em; }
    h2 { padding-bottom: 6px; border-bottom: 2px solid #333; }
  `,
  fontFamilies: [
    '본문=Malgun Gothic, sans-serif',
    '명조=Batang, serif',
    '고정폭=Courier New, monospace',
  ],
  fontSizes: [10, 12, 14, 18, 24],
  fontSizeUnit: 'px',
  lineHeights: [140, 160, 200],
  colors: ['#333333', '#888888', '#d6336c', '#1c7ed6', '#2b8a3e'],
});

contentStyle

문자열로 준 CSS는 이 에디터의 편집 영역 안에만 적용됩니다. 에디터가 CSS 중첩으로 #에디터ID .e82-content { … } 안에 감싸 넣기 때문입니다. 그래서 두 가지를 쓸 수 있습니다.

• font-size: 15px; 처럼 바로 쓴 선언은 편집 영역 전체(본문)에 붙습니다.
• p { … }, img { … }, .lead { … } 처럼 쓴 규칙은 편집 영역 안의 요소에 붙습니다.
• body { … } 는 편집 영역 안에 body 가 없어서 아무 효과가 없습니다. 본문 전체 설정은 선언으로 바로 쓰세요.
• 같은 페이지에 에디터가 여럿이어도 서로 섞이지 않고, 사이트의 다른 부분에도 새지 않습니다.

createEditor('#editor', {
  contentStyle: `
    font-family: 'Malgun Gothic', sans-serif;
    font-size: 10pt;
    line-height: 1.6;
    img { max-width: 100%; }
    table td { border: 1px solid #ccc; }
  `,
});

에디터 전체의 기본 글자 크기와 줄간격은 CSS 변수로도 바꿀 수 있습니다. 툴바·대화상자 색은 테마 문서를 보세요.

.e82 { --e82-content-size: 15px; --e82-line: 1.6; }

메뉴 목록 바꾸기

• fontFamilies 글꼴 메뉴. '보일 이름=CSS 글꼴' 형식이고, = 가 없으면 첫 글꼴 이름을 그대로 보여 줍니다. 기본 목록은 Pretendard, 맑은 고딕, 나눔고딕, 나눔명조, 굴림, 돋움, 바탕, 궁서, Arial, Georgia, Times New Roman, Courier New 입니다. 방문자 컴퓨터에 없는 글꼴은 다음 글꼴로 보이니 웹폰트는 사이트에서 불러오세요.
• fontSizes 글자 크기 메뉴의 숫자. 단위는 fontSizeUnit (기본 pt, px 도 가능). 기본은 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 36 입니다.
• lineHeights 줄간격 메뉴의 퍼센트 숫자. 기본은 100, 130, 150, 160, 180, 200, 250 이고, 고르면 문단에 line-height: 160% 처럼 들어갑니다.
• colors 글자색 팔레트. 기본은 검정부터 분홍까지 13가지입니다. 팔레트 아래 "직접 고르기"와 최근 쓴 색은 그대로 있습니다. 글자를 골랐을 때 뜨는 작은 툴바의 글자색·배경색 팔레트도 이 목록을 씁니다.

각 메뉴 맨 위의 "기본" 항목을 고르면 지정한 글꼴·크기·줄간격이 지워지고 contentStyle 의 값으로 돌아갑니다.

저장되는 HTML

<p style="line-height: 160%">
  <span style="font-family: Batang, serif; font-size: 18px; color: #d6336c">강조한 글</span>
</p>

옵션