정렬 ​

설명 ​

alignLeft() · alignCenter() · alignRight() 는 블록(block)의 정렬을 태그가 아니라 블록 속성(block attribute) data-nabi-align 으로 적습니다. 셋을 한 번에 켤 때는 alignments() 를 씁니다.

• 소유한 태그가 없어 문단·제목·이미지·표·임베드 어디에나 걸립니다.
• 셋이 한 속성을 나눠 쓰므로 서로 배타적입니다. 가운데를 켜면 오른쪽이 꺼지고, 켜져 있는 버튼을 다시 누르면 속성이 떨어집니다.
• 왼쪽도 값을 적습니다. 값이 없으면 툴바에서 왼쪽이 눌린 상태로 보이지 않고, 저장값에서도 정렬이 사라집니다.
• 나갈 때 시트(stylesheet)가 그리던 것을 인라인 style 로 굳힙니다. 글 블록은 text-align, img·iframe·table 은 margin-left/margin-right 입니다. 들여올 때 그 style 을 읽어 속성으로 되돌리므로 왕복에서 값이 변하지 않습니다.
• 값은 left·center·right 셋입니다. justify 처럼 목록에 없는 값은 붙지 않습니다.
• 표 칸과 코드 블록 안, 물건이 통째로 선택된 자리에서는 버튼이 숨습니다.
• 이미지 상자의 정렬 버튼도 같은 속성을 씁니다.
• 속성 이름은 ALIGN_ATTR 상수로도 나갑니다.

데모 ​

npm install nabi-note

import { nabi } from 'nabi-note'
import 'nabi-note/style.css'

nabi.create('#editor', {
  wings: [],
  locale: 'ko',
  onChange: (html) => 저장(html),
})