프로젝트 개요
T2Editor는 그누보드5를 비롯한 다양한 PHP 기반 웹 환경에서 사용할 수 있도록 설계된 WYSIWYG 에디터입니다. 모바일 최적화와 직관적인 UI를 제공하며, 플러그인 아키텍처를 통해 쉽게 기능을 확장할 수 있습니다. 본 거시적 안내서는 에디터의 전체 구조, 데이터 흐름, 이벤트 흐름, 주요 기능군을 한눈에 이해할 수 있도록 구성되어 있습니다.
전체 디렉터리 맵
에디터는 루트 디렉터리 아래 여러 서브 디렉터리로 구성되어 있습니다:
- config: 설정 파일과 API 구성을 포함합니다.
- js: 에디터의 핵심 로직과 유틸리티 함수들이 위치합니다.
- css: 기본 스타일과 테마를 정의합니다.
- plugin: 모든 확장 기능을 제공하는 플러그인들이 저장되어 있습니다.
- data: 업로드된 파일과 임시 데이터가 저장됩니다.
- collab: 협업 기능을 위한 저장소입니다.
- fonts: Material Icons 등 폰트 파일을 저장합니다.
기능군 맵
T2Editor는 여러 기능군으로 나눌 수 있습니다:
- 텍스트 서식: 폰트 크기, 볼드, 기울임, 밑줄, 취소선, 정렬, 색상 및 배경색 지정.
- 미디어 삽입: 이미지, 동영상, 파일 업로드 및 미리보기 지원.
- 테이블 및 코드: 표 삽입 및 편집 도구, 코드 블록 삽입 기능.
- 검색 및 AI: 에디터 내 검색과 T2Search API 연동, AI 콘텐츠 생성 및 편집 기능.
- 추가 도구: 링크 삽입, 단축 링크/QR코드 생성, 그림 그리기, 협업 기능, HTML 내보내기 등.
데이터 흐름 및 이벤트 흐름
에디터는 사용자의 입력 이벤트를 받아 편집 영역을 업데이트하고, 필요한 경우 서버와 통신합니다.
- 입력 이벤트: 키보드 및 마우스 입력은 js/core.js에서 처리됩니다.
- 플러그인 이벤트: 각 플러그인은 자신의 이벤트 리스너를 등록하여 특정 명령을 수행합니다.
- 저장 및 불러오기: 컨텐츠는 주기적으로 자동 저장되며, 서버의 data 디렉터리에 저장됩니다.
추천 읽기 순서
- 초보자와 웹마스터: 먼저 설치 방법, 사용 방법, 기능 소개를 읽은 후 각 플러그인 문서를 참조하세요.
- 개발자: core 파일 문서와 플러그인 개발 가이드를 읽고, UI 및 이벤트 흐름 문서로 넘어가세요.
참고 자료
- 기능 목록 및 버전 히스토리: DSclub T2Editor 서비스 페이지
- 설치 방법과 오류 대처: DSclub T2Editor 서비스 페이지 - 설치·오류 안내