T2Editor는 그누보드5를 비롯한 다양한 PHP 기반 웹 환경에서 사용할 수 있도록 설계된 WYSIWYG 에디터입니다. 모바일 최적화와 직관적인 UI를 제공하며, 플러그인 아키텍처를 통해 쉽게 기능을 확장할 수 있습니다. 본 거시적 안내서는 에디터의 전체 구조, 데이터 흐름, 이벤트 흐름, 주요 기능군을 한눈에 이해할 수 있도록 구성되어 있습니다.
에디터는 루트 디렉터리 아래 여러 서브 디렉터리로 구성되어 있습니다:
T2Editor는 여러 기능군으로 나눌 수 있습니다:
에디터는 사용자의 입력 이벤트를 받아 편집 영역을 업데이트하고, 필요한 경우 서버와 통신합니다.
T2Editor는 WYSIWYG 에디터로, 설치된 폴더의 파일 구조를 보고 CMS를 스스로 판정합니다(10.5.0 CMS 어댑터 구조). "어느 CMS 모드"를 고르는 설정은 없으며, 놓치는 자리는 CMS마다 다릅니다.
| 대상 | 설치 위치 | |
|---|---|---|
| 그누보드5 | g5/plugin/editor/t2editor/ | |
| 라이믹스 2.1.x | rhymix/modules/editor/skins/t2editor/ (폴더 이름이 t2editor가 아니면 관리자 목록에 뜨지 않습니다) | |
| 스탠데얼론(CMS 없음) | 웹 루트 또는 원하는 경로의 t2editor/ 폴더 | |
| 워드프레스 | CMS 감지 대상이 아니라 워드프레스 업로드 연동 어댑터만 사용합니다(10.3.0) | 본 거시적 안내서는 에디터의 전체 구조, 데이터 흐름, 이벤트 흐름, 주요 기능군을 한눈에 이해할 수 있도록 구성되어 있습니다. |
이 문서는 2026-09-28에 v10.5.1 기준으로 다시 썼습니다. 9.x 이하 계열은 EOL이며 업데이트 대상이 아닙니다.
T2Editor 10.5.1의 루트 디렉터리는 아래 11개입니다.
core.css · dark.css · 발행 본문용 content.csst2editor_db/에 내부 데이터 격리(10.5.0 신규). 협업 데이터는 루트 collab/가 아니라 data/t2editor_db/collab/이며 에디터가 자동 생성합니다. 예전에 만든 <t2editor>/collab/ 폴더가 남아 있으면 최초 실행 때 자동으로 새 위치로 옮겨집니다. 협업 코드는 plugin/collab/에 있습니다.php/(서버사이드) · js/(클라이언트) · locales/ 확장 (10.1.0 신규)배치별 데이터 경로가 다르다는 점은 N-05-cms-adapter-and-data-paths.md를 보십시오.
T2Editor는 여러 기능군으로 나눌 수 있습니다:
에디터는 사용자의 입력 이벤트를 받아 편집 영역을 업데이트하고, 필요한 경우 서버와 통신합니다.
js/core.js에서 처리되며, 서식 명령은 10.3.0부터 js/format-engine.js의 표준 Selection/Range 경로가 1차로 처리합니다(이전 브라우저 호환용 보조 경로는 유지). IME 조합 입력 중에는 에디터의 별도 키 처리와 브라우저 입력이 중복 실행되지 않습니다(10.5.0).data/editor · 라이믹스 files · 스탠더얼론 t2editor/data, 내부 데이터는 그 아래 t2editor_db/).| 이전 | 새 버전 | ||
|---|---|---|---|
| 1 | --- | 1 | --- |
| 2 | title: T2Editor 거시적 안내서 | 2 | title: T2Editor 거시적 안내서 |
| 3 | document_id: 00-overview-macro-guide | 3 | document_id: 00-overview-macro-guide |
| 4 | slug: 00-overview-macro-guide | 4 | slug: 00-overview-macro-guide |
| 5 | target_editor_version: 9.0.0 | 5 | target_editor_version: 10.5.1 |
| 6 | document_type: overview | 6 | document_type: overview |
| 7 | doc_type: overview | 7 | doc_type: overview |
| 8 | target_readers: [초보자, 웹마스터, 개발자, AI agent] | 8 | target_readers: [초보자, 웹마스터, 개발자, AI agent] |
| 9 | importance: High | 9 | importance: High |
| 10 | dependency: Medium | 10 | dependency: Medium |
| 11 | core_type: Overview | 11 | core_type: Overview |
| 12 | stability: [Version-Bound] | 12 | stability: [Version-Bound] |
| 13 | stable_anchor: [] | 13 | stable_anchor: [] |
| 14 | version_bound: [] | 14 | version_bound: [] |
| 15 | related_docs: [] | 15 | related_docs: [] |
| 16 | related_files: [] | 16 | related_files: [] |
| 17 | related_functions: [] | 17 | related_functions: [] |
| 18 | related_classes_modules: [] | 18 | related_classes_modules: [] |
| 19 | related_features: [] | 19 | related_features: [] |
| 20 | related_ui: [] | 20 | related_ui: [] |
| 21 | change_risk: 수정 범위를 넓게 잡으면 관련 기능과 문서 흐름에 영향이 생길 수 있습니다. | 21 | change_risk: 수정 범위를 넓게 잡으면 관련 기능과 문서 흐름에 영향이 생길 수 있습니다. |
| 22 | reading_order: 01 | 22 | reading_order: 01 |
| 23 | summary: 에디터 전체 구조와 주요 기능을 설명하는 거시적 안내서 문서 | 23 | summary: 에디터 전체 구조와 주요 기능을 설명하는 거시적 안내서 문서 |
| 24 | description: 에디터 전체 구조와 주요 기능을 설명하는 거시적 안내서 | 24 | description: 에디터 전체 구조와 주요 기능을 설명하는 거시적 안내서 |
| 25 | tags: [overview, macro, T2Editor] | 25 | tags: [overview, macro, T2Editor] |
| 26 | version_tag: 9.0.0 | 26 | version_tag: 10.5.1 |
| 27 | maintenance_difficulty: Medium | 27 | maintenance_difficulty: Medium |
| 28 | test_requirement: Medium | 28 | test_requirement: Medium |
| 29 | ai_agent_risk: Medium | 29 | ai_agent_risk: Medium |
| 30 | source_basis: [현재 코드 분석 기반, 웹 참고 자료 기반] | 30 | source_basis: [현재 코드 분석 기반, 공식 릴리즈 노트 기반, 공식 배포판 실물 기반] |
| 31 | beginner_section_included: true | 31 | beginner_section_included: true |
| 32 | webmaster_section_included: true | 32 | webmaster_section_included: true |
| 33 | developer_section_included: true | 33 | developer_section_included: true |
| 34 | --- | 34 | --- |
| 35 | ## 프로젝트 개요 | 35 | ## 프로젝트 개요 |
| 36 | 36 | ||
| 37 | T2Editor는 그누보드5를 비롯한 다양한 PHP 기반 웹 환경에서 사용할 수 있도록 설계된 WYSIWYG 에디터입니다. 모바일 최적화와 직관적인 UI를 제공하며, 플러그인 아키텍처를 통해 쉽게 기능을 확장할 수 있습니다. 본 거시적 안내서는 에디터의 전체 구조, 데이터 흐름, 이벤트 흐름, 주요 기능군을 한눈에 이해할 수 있도록 구성되어 있습니다. | 37 | T2Editor는 WYSIWYG 에디터로, 설치된 폴더의 파일 구조를 보고 CMS를 스스로 판정합니다(10.5.0 CMS 어댑터 구조). "어느 CMS 모드"를 고르는 설정은 없으며, 놓치는 자리는 CMS마다 다릅니다. |
| 38 | 38 | ||
| 39 | | 대상 | 설치 위치 | | ||
| 40 | |---|---| | ||
| 41 | | 그누보드5 | `g5/plugin/editor/t2editor/` | | ||
| 42 | | 라이믹스 2.1.x | `rhymix/modules/editor/skins/t2editor/` (폴더 이름이 `t2editor`가 아니면 관리자 목록에 뜨지 않습니다) | | ||
| 43 | | 스탠데얼론(CMS 없음) | 웹 루트 또는 원하는 경로의 `t2editor/` 폴더 | | ||
| 44 | | 워드프레스 | CMS 감지 대상이 아니라 워드프레스 업로드 연동 어댑터만 사용합니다(10.3.0) | 본 거시적 안내서는 에디터의 전체 구조, 데이터 흐름, 이벤트 흐름, 주요 기능군을 한눈에 이해할 수 있도록 구성되어 있습니다. | ||
| 45 | |||
| 46 | > 이 문서는 2026-09-28에 v10.5.1 기준으로 다시 썼습니다. 9.x 이하 계열은 EOL이며 업데이트 대상이 아닙니다. | ||
| 47 | |||
| 39 | ## 전체 디렉터리 맵 | 48 | ## 전체 디렉터리 맵 |
| 40 | 49 | ||
| 41 | 에디터는 루트 디렉터리 아래 여러 서브 디렉터리로 구성되어 있습니다: | 50 | T2Editor 10.5.1의 루트 디렉터리는 아래 11개입니다. |
| 42 | - **config**: 설정 파일과 API 구성을 포함합니다. | 51 | - **admin** — 관리자 화면·자동 업데이트·확장 마켓·환경 점검 API (10.4.0 신규 통합 관리 페이지) |
| 43 | - **js**: 에디터의 핵심 로직과 유틸리티 함수들이 위치합니다. | 52 | - **config** — 경로·권장·iframe 허용 목록 등 코어 설정과 엔드포인트 |
| 44 | - **css**: 기본 스타일과 테마를 정의합니다. | 53 | - **css** — `core.css` · `dark.css` · **발행 본문용 `content.css`** |
| 45 | - **plugin**: 모든 확장 기능을 제공하는 플러그인들이 저장되어 있습니다. | 54 | - **data** — 업로드된 파일. 아래 `t2editor_db/`에 내부 데이터 격리(10.5.0 신규). **협업 데이터는 루트 `collab/`가 아니라 `data/t2editor_db/collab/`이며 에디터가 자동 생성합니다.** 예전에 만든 `<t2editor>/collab/` 폴더가 남아 있으면 최초 실행 때 자동으로 새 위치로 옮겨집니다. 협업 **코드**는 `plugin/collab/`에 있습니다. |
| 46 | - **data**: 업로드된 파일과 임시 데이터가 저장됩니다. | 55 | - **extend** — `php/`(서버사이드) · `js/`(클라이언트) · `locales/` 확장 (10.1.0 신규) |
| 47 | - **collab**: 협업 기능을 위한 저장소입니다. | 56 | - **fonts** — Material Icons 로컬 폰트 |
| 48 | - **fonts**: Material Icons 등 폰트 파일을 저장합니다. | 57 | - **integration/cms** — CMS 감지·관리자 인증·데이터 경로·업로드 어댑터 4종(그누보드5·라이믹스·스탠더얼론·워드프레스) (10.5.0 신규) |
| 58 | - **js** — 코어 편집 로직과 PDF/HLS 번들 | ||
| 59 | - **locales** — 한국어·영어·일본어·중국어 간체 UI 문구 (10.3.0 신규) | ||
| 60 | - **plugin** — 플러그인 15종 | ||
| 61 | - **vendor** — 서드파티 런타임(hlsjs, nsfwjs + MobileNetV2 모델, TensorFlow.js 백엔드, p2p-media-loader) | ||
| 49 | 62 | ||
| 63 | > 배치별 데이터 경로가 다르다는 점은 [[N-05-cms-adapter-and-data-paths.md]]를 보십시오. | ||
| 64 | |||
| 50 | ## 기능군 맵 | 65 | ## 기능군 맵 |
| 51 | 66 | ||
| 52 | T2Editor는 여러 기능군으로 나눌 수 있습니다: | 67 | T2Editor는 여러 기능군으로 나눌 수 있습니다: |
| 53 | - **텍스트 서식**: 폰트 크기, 볼드, 기울임, 밑줄, 취소선, 정렬, 색상 및 배경색 지정. | 68 | - **텍스트 서식**: 폰트 크기, 볼드, 기울임, 밑줄, 취소선, 정렬, 색상 및 배경색 지정. |
| 54 | - **미디어 삽입**: 이미지, 동영상, 파일 업로드 및 미리보기 지원. | 69 | - **미디어 삽입**: 이미지, 동영상, 파일 업로드 및 미리보기 지원. |
| 55 | - **테이블 및 코드**: 표 삽입 및 편집 도구, 코드 블록 삽입 기능. | 70 | - **테이블 및 코드**: 표 삽입 및 편집 도구, 코드 블록 삽입 기능. |
| 56 | - **검색 및 AI**: 에디터 내 검색과 T2Search API 연동, AI 콘텐츠 생성 및 편집 기능. | 71 | - **검색 및 AI**: 에디터 내 검색과 T2Search API 연동, AI 콘텐츠 생성 및 편집 기능. |
| 57 | - **추가 도구**: 링크 삽입, 단축 링크/QR코드 생성, 그림 그리기, 협업 기능, HTML 내보내기 등. | 72 | - **추가 도구**: 링크 삽입, 단축 링크/QR코드 생성, 그림 그리기, 협업 기능, HTML 내보내기 등. |
| 73 | - **국제화**: 한국어·영어·일본어·중국어 간체 UI. 브라우저 언어를 자동 감지하고 에디터 하단 언어 메뉴에서 즉시 전환하며, 선택은 저장되어 다음 접속에도 유지됩니다(10.3.0). | ||
| 74 | - **영상 공유**: 현재 재생 시점부터 시작하는 공유 링크, HLS P2P 재생, 같은 영상을 보는 이용자 간 브라우저 간 P2P 실시간 채팅(10.3.0). | ||
| 75 | - **관리자 기능**: 버전 정보·라이선스·업데이트·확장 마켓·기본 설정·필터·툴바 아이콘·화면 크기별 메뉴 구성·업로드 종류와 용량·비밀번호를 한 화면에서 관리하는 통합 관리 페이지, 자동 업데이트, 확장 마켓(10.4.0). [[N-02-admin-console-guide.md]] | ||
| 76 | - **링크 미리보기 카드**: 웹사이트 주소를 붙여넣으면 제목·설명·대표 이미지·사이트 이름을 표시하는 카드가 자동 생성되고, 원본 링크는 그대로 유지됩니다(10.3.0). | ||
| 58 | 77 | ||
| 59 | ## 데이터 흐름 및 이벤트 흐름 | 78 | ## 데이터 흐름 및 이벤트 흐름 |
| 60 | 79 | ||
| 61 | 에디터는 사용자의 입력 이벤트를 받아 편집 영역을 업데이트하고, 필요한 경우 서버와 통신합니다. | 80 | 에디터는 사용자의 입력 이벤트를 받아 편집 영역을 업데이트하고, 필요한 경우 서버와 통신합니다. |
| 62 | - **입력 이벤트**: 키보드 및 마우스 입력은 js/core.js에서 처리됩니다. | 81 | - **입력 이벤트**: 키보드 및 마우스 입력은 `js/core.js`에서 처리되며, 서식 명령은 10.3.0부터 `js/format-engine.js`의 표준 Selection/Range 경로가 1차로 처리합니다(이전 브라우저 호환용 보조 경로는 유지). IME 조합 입력 중에는 에디터의 별도 키 처리와 브라우저 입력이 중복 실행되지 않습니다(10.5.0). |
| 63 | - **플러그인 이벤트**: 각 플러그인은 자신의 이벤트 리스너를 등록하여 특정 명령을 수행합니다. | 82 | - **플러그인 이벤트**: 각 플러그인은 자신의 이벤트 리스너를 등록하여 특정 명령을 수행합니다. |
| 64 | - **저장 및 불러오기**: 컨텐츠는 주기적으로 자동 저장되며, 서버의 data 디렉터리에 저장됩니다. | 83 | - **저장 및 불러오기**: 자동저장은 브라우저 저장소를 쓰며, 10.5.0에서 현재 페이지·게시물 주소·에디터 ID를 기준으로 초안을 분리해 한 페이지의 여러 에디터가 서로 영향을 주지 않게 되었습니다. 브라우저의 사생활 보호 설정 등으로 저장소 사용이 제한된 경우에도 에디터는 중단되지 않습니다. 서버로 저장되는 것은 업로드 파일과 관리자 설정·협업 상태이며, 그 위치는 CMS에 따라 갈립니다(그누보드5 `data/editor` · 라이믹스 `files` · 스탠더얼론 `t2editor/data`, 내부 데이터는 그 아래 `t2editor_db/`). |
| 65 | 84 | ||
| 66 | ## 추천 읽기 순서 | 85 | ## 추천 읽기 순서 |
| 67 | 86 | ||
| 68 | - 초보자와 웹마스터: 먼저 설치 방법, 사용 방법, 기능 소개를 읽은 후 각 플러그인 문서를 참조하세요. | 87 | - 초보자와 웹마스터: 먼저 설치 방법, 사용 방법, 기능 소개를 읽은 후 각 플러그인 문서를 참조하세요. |
| 69 | - 개발자: core 파일 문서와 플러그인 개발 가이드를 읽고, UI 및 이벤트 흐름 문서로 넘어가세요. | 88 | - 개발자: core 파일 문서와 플러그인 개발 가이드를 읽고, UI 및 이벤트 흐름 문서로 넘어가세요. |
| 70 | 89 | ||
| 71 | ## 참고 자료 | 90 | ## 참고 자료 |
| 72 | 91 | ||
| 73 | - 기능 목록 및 버전 히스토리: [DSclub T2Editor 서비스 페이지](https://dsclub.kr/service/editor) | 92 | - 기능 목록 및 버전 히스토리: [DSclub T2Editor 서비스 페이지](https://dsclub.kr/service/editor) |
| 74 | - 설치 방법과 오류 대처: [DSclub T2Editor 서비스 페이지 - 설치·오류 안내](https://dsclub.kr/service/editor) | 93 | - 설치 방법과 오류 대처: [DSclub T2Editor 서비스 페이지 - 설치·오류 안내](https://dsclub.kr/service/editor) |
| 94 | - 설치 절차(3경로): [[01-installation-guide.md]] | ||
| 95 | - 판본 호환 매트릭스: [[06-version-compatibility-guide.md]] | ||
| 96 | - 오류 대응: [[71-error-handling-guide.md]] | ||
| 97 | - 데이터 경로: [[N-05-cms-adapter-and-data-paths.md]] | ||
| 98 | - 서버측 정제와 게시 화면 스타일(10.5.1에 없는 것): [[N-06-server-sanitize-and-content-style.md]] | ||