T2Editor 개발 및 관리 가이드 (claude ai) > 코딩 스토리

버전: 4.0 (2025.03.16)

목차

1. 개요

2. 설치 및 구성

3. 코어 컴포넌트

4. 주요 기능

5. 커스터마이징

6. 문제 해결

7. 보안 고려사항

​

1. 개요

T2Editor는 그누보드5 환경에 최적화된 WYSIWYG 에디터로, 한국 사용자를 위해 설계되었습니다. 현대적인 UI와 다양한 편집 기능을 제공합니다.

주요 기능

* 텍스트 편집: 글자 크기, 색상, 정렬 등 서식 옵션

* 미디어 관리: 이미지 업로드(WebP 변환), YouTube 삽입

* 테이블 기능: 테이블 생성 및 편집, CSV 내보내기

* 파일 첨부: PDF, ZIP, 오디오 파일 지원

* PDF 뷰어: 내장형 PDF 문서 열람

* 자동 저장: 작업 손실 방지

* HTML 내보내기: HTML 스킨을 통한 HTML 문서 내보내기

​

2. 설치 및 구성

2.1 시스템 요구사항

* 서버: PHP 7.2 이상

* 그누보드: 그누보드5 최신 버전

* 브라우저: 최신 Chrome, Firefox, Safari, Edge

2.2 설치 프로세스

1. 파일 업로드

* 다운로드한 파일의 압축을 풀어 압축 해제한 폴더 안의 t2editor 폴더를 그누보드 설치 경로의 /plugin/editor/디렉토리에 업로드

2.3 권한 설정


# 업로드 디렉토리 권한 설정

2.4 그누보드 설정
전체 사이트 적용

* 관리자 > 환경설정 > 기본환경설정 > 에디터 선택: 'T2Editor'

특정 게시판 적용

* 관리자 > 게시판관리 > 게시판 수정 > 게시판 에디터 선택: 'T2Editor'

2.5. 미디어 블록 스타일 설정

head.sub.php 또는 view.skin.php 파일에 추가:


<link href="<?php echo G5_PLUGIN_URL ?>/editor/t2editor/css/t2content.css" rel="stylesheet">

2.6 업로드 디렉토리

기본 저장 경로:

* 이미지:

/data/editor/[YYMMDD]/

* 파일:

 /data/editor/t2editor_[YYYYMMDD]/

​

3. 코어 컴포넌트

3.1 파일 구조

/plugin/editor/t2editor/

3.2 핵심 클래스 구조

t2editor.js 의 기본 구조:

class T2Editor {

3.3 PHP 통합

editor.lib.php 주요 함수:

* editor_html() : 에디터 HTML 생성

* get_editor_js() : 폼 제출 시 JavaScript 코드

* chk_editor_js() : 입력 검증 코드

​

4. 주요 기능

4.1 텍스트 편집

기본 서식 명령어:

* bold, italic, underline, strikeThrough

* justifyContent: 텍스트 정렬

* fontSize: 글자 크기

* foreColor, backColor: 색상

색상 선택기: 기본 색상 팔레트와 HEX 코드 입력 지원

실행 취소/다시 실행: 내부 스택을 통한 변경 이력 관리

4.2 미디어 관리

이미지 업로드:

showImageUploadModal() → 사용자 파일 선택

handleMultipleImageUpload() → 서버 업로드

image_upload.php: WebP 변환 (가능한 경우)

미디어블록 삽입:

YouTube:

* URL 입력 → 비디오 ID 추출 → iframe 생성

파일 첨부:

* 지원 파일 형식: ZIP, PDF, TXT, MP3 등

* 파일 유형별 아이콘 및 미리보기 제공

4.3 테이블 기능

테이블 생성:

* 행/열 수 설정

* 테이블 스타일 지정 (너비, 테두리 등)

테이블 편집:

* 행/열 추가 및 삭제

* 셀 크기 조절

* CSV 내보내기

반응형 테이블:

* 큰 테이블은 스크롤 컨테이너에 자동 배치

4.4 자동 저장

* localStorage를 활용한 임시 저장

* 토글 가능한 자동 저장 옵션

* 브라우저 새로고침 후에도 데이터 유지

4.5 HTML 내보내기

* 현재 에디터 내용을 독립 실행형 HTML 문서로 변환

* 미디어 요소 및 스타일 포함

* 커스텀 템플릿 (export_html_skin.html) 사용

​

5. 커스터마이징

5.1 css 수정

/* t2editor.css 수정 예시 */

5.2 툴바 버튼 추가:

1. editor.lib.php에 HTML 버튼 추가


<button class="t2-btn" data-command="customCommand">

2. t2editor.js에 추가한 버튼의 명령어 처리 추가


case 'customCommand':

5.3 기능 확장

1. 업로드 허용 확장자 추가

file_upload.php:


$allowed_types = ['zip', 'pdf', 'txt', 'mp3', '새확장자'];

2. 파일 유형 색상 및 아이콘 추가


getFileColor(type) {

3. HTML 템플릿 수정:

* export_html_skin.html 파일 편집

​

6. 문제 해결

6.1 일반적인 문제

6.1.1. 에디터가 로드되지 않음:

* 라이센스 파일 확인: License_en.txt와 License_ko.txt

* JavaScript 오류: 브라우저 콘솔 확인

6.1.2. 이미지/파일 업로드 실패:

* 디렉토리 권한: /data/editor/ 권한 확인

* PHP 설정: upload_max_filesize 및 post_max_size 확인

WebP 변환 실패:

* PHP GD 라이브러리 설치 확인

6.1.3. 그누보드5 모바일 페이지에서 에디터가 보이지 않음

데스크톱 페이지에서는 에디터가 보이지만 모바일에서는 보이지 않는 경우:

1. 그누보드 루트 또는 테마의 config.php 에서 아래와 같이 false를 true로 변경

define('G5_IS_MOBILE_DHTML_USE', false); 

2. 환경 설정의 에디터 사용 설정에서 t2editor을 사용으로 설정 또는 게시판의 에디터를 t2editor로 설정

3. 게시판 관리 수정에서 DHTML 에디터 사용에 체크

*https://sir.kr/qa/399462 참고

6.2 심각한 문제

​dsclub2023@gmail.com 로 문의

7. 보안 고려사항

7.1 파일 업로드 보안

파일 유형 제한:

// 이미지 파일 검증

파일 이름 무작위화:

$save_filename = $uid.'_'.time().'.'.$file_ext;

7.2 XSS 방지

입력 데이터 검증:

$escaped_content = str_replace(

​

© 2025 Tak2 (dsclub.kr) | 문의: dsclub2023@gmail.com

​