- 에디터 구현 전략
xNote 에디터는 TipTap v2를 기반으로 하며, ProseMirror 스키마를 통해 완전한 커스터마이징이 가능합니다. Vue 3 Composition API와 자연스럽게 통합되며 MIT 라이선스로 상업적 이용도 자유롭습니다.
이미지는 본문 인라인과 하단 첨부 갤러리, 두 레이어로 분리하여 관리합니다. 본문엔 웹 최적화 이미지, 원본은 첨부 갤러리에 보관하는 구조입니다.
다중 이미지 처리 방식
드래그&앤드롭, 클립보드 붙여넣기, 파일 선택 세 가지 방식 모두 지원합니다. 이미지 클릭 시
리사이즈 핸들
과 정렬 도구가 나타납니다.
- 소 (200px) / 중 (400px) / 대 (600px) / 전체 너비
- 좌 / 가운데 / 우 정렬
- 드래그로 크기 자유 조절
---
툴바 (15종)
- 굵게·기울임·밑줄·취소선 (Ctrl+B/I/U 단축키)
- H1·H2·H3, 글머리·번호·체크리스트
- 인용구, 코드블록, 구분선, 링크
- 이미지 삽입 (모달), 표 삽입, 실행취소/다시실행
인라인 이미지 (3가지 방법)
- 툴바 버튼 → 파일선택 또는 URL 입력
- 에디터 영역에 이미지 파일 직접 드롭
- 클립보드에서 Ctrl+V 붙여넣기
- 삽입 후 클릭하면 소/중/대/전체 크기 조절, 좌/가운데/우 정렬, 드래그 리사이즈 핸들
하단 첨부 갤러리 (별도 레이어)
- 드롭존 + 파일선택 버튼으로 다중 파일 무제한 추가
- 이미지 썸네일 미리보기, PDF/오디오/동영상 아이콘
- 개별 업로드 진행바 (청크 업로드 시뮬레이션)
- 카드 드래그로 순서 변경
- 카드 클릭으로 다중 선택 → 일괄 삭제
- 이미지 카드는 에디터 본문에 바로 삽입 가능
기타 — 태그 입력(Enter로 추가), 카테고리·유튜브 링크, 글자/단어/줄 수 카운터, 임시저장 사이드바
댓글 (0)
댓글 쓰기