글자색과 배경색

color 는 글자 색, highlight 는 글자 뒤 배경 색(형광펜)입니다. 공지에서 중요한 문장을 눈에 띄게 할 때 씁니다.

createEditor('#editor', {
  toolbar: 'bold | color highlight',
  colors: ['#000000', '#e03131', '#1c7ed6', '#2b8a3e', '#f08c00'],
});

팔레트

• 맨 위 "자동"(글자 색) 또는 "없음"(배경 색)을 누르면 지정한 색을 지웁니다.
• 가운데에 기본 색들이 있고, 한 번 쓴 색은 "최근 사용" 줄에 8개까지 남습니다 (이 브라우저의 localStorage).
• "직접 입력"에 #1c7ed6 같은 16진수 코드를 넣거나 색 고르기 창을 열 수 있습니다.
• 툴바 버튼 아래 막대에 커서 위치의 색이 보입니다.

colors 옵션은 글자 색 팔레트를 사이트 색으로 바꿉니다. 같은 목록이 표 칸 배경색 팔레트에도 쓰입니다. 배경 색 버튼은 따로 정해진 형광펜 색 13가지를 씁니다.

프리셋과 휴대폰

color 와 highlight 는 basic, board, full 의 첫 줄에 있습니다. 휴대폰 툴바 첫 줄에는 글자 색이 있고 배경 색은 ⋯ 안에 있습니다. 글자를 선택하면 뜨는 선택 툴바에도 두 버튼이 있습니다.

저장되는 HTML

색은 style 속성이 있는 <span> 으로 저장됩니다. 브라우저가 16진수 색을 rgb() 로 바꿔 적기도 합니다.

<span style="color: rgb(224, 49, 49)">10월 31일</span>
<span style="background-color: rgb(255, 243, 191)">늦게 낸 서류는 …</span>

API

editor.exec('color', '#e03131');
editor.exec('highlight', '#fff3bf');
editor.exec('color', ''); // 색 지우기

옵션