플러그인: table

플러그인 개요

table 플러그인은 T2Editor의 기본 설치에 포함되는 확장 모듈로, 특정 기능을 에디터에 추가하거나 사용자 경험을 향상시키기 위해 제공됩니다. 본 문서는 플러그인의 역할과 동작 방식을 초보자와 일반 웹마스터도 이해할 수 있도록 설명하고, 전문 개발자를 위한 내부 구조와 확장 포인트를 상세히 제공합니다.

초보자와 웹마스터를 위한 기능 설명

이 섹션에서는 플러그인의 주요 기능과 사용법을 쉽게 설명합니다. 각 플러그인은 툴바 버튼이나 단축키를 통해 호출되며, 파일이나 미디어를 삽입하고, 콘텐츠를 포맷하고, 검색과 협업을 지원합니다.

주요 역할: 플러그인이 어떤 기능을 사용자에게 제공하는지 요약합니다. 예를 들어, image 플러그인은 이미지 업로드와 미리보기, 크기 조절을 지원하며, search 플러그인은 에디터 내 검색과 T2Search API 연동을 제공합니다.
사용 시나리오: 플러그인을 언제 사용해야 하는지, 어떤 메뉴나 버튼에서 접근하는지 설명합니다.
권한 및 설정: 플러그인이 파일 업로드를 수행하는 경우, 서버의 /data 또는 /collab 디렉터리에 적절한 권한(707)을 부여해야 합니다.

초보자는 플러그인의 코드를 수정할 필요 없이, 제공되는 설정과 기본 동작을 활용해 에디터를 사용할 수 있습니다.

전문 개발자를 위한 구조 분석

파일 구조

JavaScript: 9.0.0/t2editor/plugin/table/table.js
CSS: 9.0.0/t2editor/plugin/table/table.css

내부 메서드

플러그인의 자바스크립트 파일에는 다음과 같은 주요 메서드들이 정의되어 있습니다. 각 메서드는 클래스 내부에서 특정 이벤트를 처리하거나 사용자 인터랙션에 응답합니다.

cleanupEmptyLines(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

createMoveControls(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

createTable(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

createTableControls(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

createTableWrapper(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

exportTableToCSV(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

handleCommand(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

handlePaste(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

initializeTableBlocks(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

insertTableWithLineBreaks(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

moveBlock(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

onContentSet(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

setupCellEditing(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

setupTableCellEditing(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

setupTableControlEvents(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

setupTableModalEvents(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

setupTableResizing(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

showTableModal(): 이 메서드는 table 플러그인의 핵심 로직 중 하나입니다. 입력 값과 처리 과정, 출력 동작을 이해하고 수정 시 어떤 부분에 영향을 미치는지 파악해야 합니다.

초기화 및 이벤트 흐름

플러그인은 에디터 초기화 과정에서 editor.lib.php에 등록됩니다. 플러그인 등록 순서는 editor.lib.php의 $plugin_priority 배열에서 지정할 수 있으며, 0은 즉시 로드, 1·2·3은 지연 로드를 의미합니다.

플러그인의 초기화 함수는 에디터가 준비된 시점에 호출되며, 필요한 UI 요소를 생성하고 이벤트 리스너를 바인딩합니다. 각 메서드는 사용자 입력이나 명령 실행 시 동작하므로, 수정 시에는 호출 관계를 잘 파악해야 합니다.

UI 요소와 스타일

플러그인의 CSS 파일은 해당 플러그인이 제공하는 UI 컴포넌트의 스타일을 정의합니다. 예를 들어 버튼, 모달 창, 툴바 아이콘 등의 디자인을 지정합니다. 스타일을 수정할 때에는 core.css 및 dark.css와의 충돌을 방지하고, 스킨을 사용하는 경우 스킨에서 재정의할 수 있는 구조를 따라야 합니다.

확장 포인트 및 안전한 수정 방법

새로운 기능을 추가하려면 플러그인의 JS 클래스에 메서드를 추가하고, 버튼과 커맨드를 툴바 설정에 연결해야 합니다.
기존 기능을 수정할 때에는 입력 값과 상태 변화를 면밀히 추적하고, 다른 플러그인에 미치는 영향을 검토해야 합니다.
플러그인의 CSS 수정 시, 클래스 명은 가능한 한 고유하게 유지하고 core 스타일을 오버라이드하지 않도록 주의하세요.

테스트 포인트

플러그인 설치 후 브라우저 콘솔에 오류 메시지가 없는지 확인합니다.
다양한 브라우저와 기기에서 UI가 깨지지 않는지 점검합니다.
플러그인 기능이 다른 플러그인과 충돌하지 않고 제대로 작동하는지 테스트합니다.

AI agent 작업 규칙

AI agent는 플러그인 코드를 수정할 때 반드시 이 문서와 관련된 코어 파일 문서를 먼저 읽어야 합니다.
Stable Anchor로 표시된 구조를 기반으로 수정하면 버전 간 안정성을 높일 수 있습니다.
Version-Bound로 표시된 부분은 버전 업데이트 시 변경될 수 있으므로, 수정 전 최신 문서를 확인하세요.

참고 / 인용 / 비교 자료

기능 목록과 버전 히스토리: DSclub T2Editor 서비스 페이지
설치 및 오류 대처법: DSclub T2Editor 서비스 페이지 - 설치·오류 안내
라이선스 조항: DSclub T2Editor 서비스 페이지 - 라이선스 안내