1. 소개
- 이모지 (Emoji) — 2,000여 개 이모지 삽입
- 이모티콘 (Emoticon) — 커스텀 이미지 이모티콘 팩 지원
- 이미지 업로드 — 드래그 앤 드롭·클립보드 붙여넣기
- 이미지 리사이즈 — 에디터 내 8방향 드래그 핸들
- 테이블 그리드 — 클릭으로 테이블 생성
- 자동 번역 — 선택 텍스트 실시간 번역
- 코드 블록 — 언어별 코드 삽입
- 레이아웃 — 다단 레이아웃 삽입
- 인용구 — 블록 인용 스타일 삽입
- 파일 첨부 — 파일 업로드 및 다운로드 링크 삽입
- 내보내기 — PDF·Word 내보내기
- 댓글 에디터 — 게시판 댓글/답글/수정 폼에도 프로 에디터 적용
💡 PHP 5.6 ~ 8.x, DXCMS 8.x 이상에서 동작합니다.
2. 설치
2-1. 파일 업로드
다운로드한 dx-ck-pro.zip 을 압축 해제 후 서버에 업로드합니다.
plugins/dx-ck-pro/ ← 플러그인 본체
assets/ckeditor4-pro/ ← CKEditor 4 에셋
extend/top/ ← 자동 로드 확장 파일
2-2. 관리자 활성화
- DXCMS 관리자 → 플러그인 → 에디터 탭에서 DX CK Pro 활성화
- 활성화 후 사이트 전체 에디터가 즉시 교체됩니다.
2-3. 게시판별 에디터 지정
- 관리자 → 게시판 관리 → 해당 게시판 설정 → 에디터: DX CK Pro 선택
- 게시판별로 다른 에디터를 사용할 수 있습니다.
3. 관리자 설정
| 설정 항목 | 기본값 | 설명 |
| 에디터 높이 | 400px | 게시글 작성 에디터 높이 |
| 댓글 에디터 높이 | 150px | 댓글/답글 에디터 높이 |
| 댓글에 에디터 사용 | 활성 | 댓글/답글/수정 폼에 프로 에디터 적용 여부 |
| 이미지 업로드 사용 | 활성 | 이미지 업로드 버튼 표시 여부 |
| 이모지 사용 | 활성 | 이모지 버튼 표시 여부 |
| 이모티콘 사용 | 활성 | 이모티콘 버튼 표시 여부 |
| 자동저장 | 활성 | 작성 중 내용 자동 저장 여부 |
4. 툴바 구성
4-1. 게시글 작성 툴바
아래 버튼들이 순서대로 표시됩니다.| 그룹 | 버튼 |
| 서식 | Bold, Italic, Underline, Strike, RemoveFormat |
| 색상 | TextColor, BGColor |
| 문단 | NumberedList, BulletedList, JustifyLeft, JustifyCenter, JustifyRight |
| 링크 | Link, Unlink |
| 삽입 | 이미지, 이모지, 이모티콘, 테이블, 파일첨부, 레이아웃, 코드블록, HorizontalRule |
| 도구 | 테이블스타일, 자동번역, Source |
| 내보내기 | PDF 내보내기, Word 내보내기 |
4-2. 댓글 툴바
댓글/답글/수정 폼에는 간소화된 툴바가 표시됩니다.| 그룹 | 버튼 |
| 서식 | Bold, Italic, Underline, Strike, RemoveFormat |
| 색상 | TextColor, BGColor |
| 링크 | Link, Unlink |
| 삽입 | 이미지, 이모지, 이모티콘, HorizontalRule |
| 도구 | 자동번역, Source |
5. 이모티콘 추가 방법
5-1. 폴더 구조
data/
└── uploads/
└── emoticons/
├── 팩이름1/
│ ├── config.json
│ ├── 01.png
│ ├── 02.png
│ └── ...
└── 팩이름2/
├── config.json
└── ...
5-2. config.json 작성
각 이모티콘 팩 폴더에 아래 형식의 config.json 파일을 만듭니다.
{
"name": "패션봇",
"order": 1,
"size": 80
}
| 키 | 타입 | 설명 |
| name | string | 에디터 이모티콘 탭에 표시될 팩 이름 |
| order | number | 탭 정렬 순서 (숫자가 작을수록 앞에 표시) |
| size | number | 에디터에 삽입될 이미지 너비 (px 단위, height는 비율 자동) |
5-3. 이미지 파일 규칙
- 지원 형식: PNG, GIF, WebP, JPG
- 파일명은 자유롭게 사용 가능 (예: 01.png, happy.gif)
- 정사각형 비율 권장 (예: 512×512, 256×256)
- size 값이 너비(width)로 적용되며 높이는 원본 비율대로 자동 조정됩니다.
- GIF 애니메이션도 지원됩니다.
💡 이미지를 정사각형으로 잘라두면 에디터 팝업의 썸네일과 삽입 결과가 일정하게 표시됩니다.
5-4. 적용 확인
- 파일을 업로드하면 별도 설정 없이 자동으로 인식됩니다.
- 에디터 툴바의 이모티콘 버튼 클릭 → 팩 탭에서 이모티콘 선택
- 삽입된 이미지는 width 값(size)으로 고정되며 비율은 유지됩니다.
🚫 config.json 파일이 없는 폴더는 인식되지 않습니다.
6. 이미지 리사이즈
- 모서리 핸들 드래그: 비율을 유지하며 크기 조정
- 상하 핸들 드래그: 높이만 변경
- 좌우 핸들 드래그: 너비만 변경
- Shift 키 + 드래그: 어느 방향이든 비율 유지
- 이미지 더블클릭 또는 우클릭 → 크기 설정: 모달에서 px/% 직접 입력
크기 설정 모달 기능
- 너비/높이 입력 (px 또는 %)
- 비율 잠금 버튼 — 너비 변경 시 높이 자동 연동
- 빠른 크기: 25% / 50% / 75% / 원본 / 전체 너비
- 정렬: 없음 / 왼쪽(float) / 가운데 / 오른쪽(float)
이미지 우클릭 메뉴
- 이미지 크기 설정
- URL 복사
- 새 탭에서 열기
- 이미지 삭제
7. 댓글 에디터
동작 방식
- view.php를 수정하지 않고 JS 오버라이드 방식으로 기본 에디터를 대체합니다.
- 게시판별 에디터가 DX CK Pro로 설정되어 있으면 해당 게시판 댓글에만 적용됩니다.
- 설정을 비활성화하면 기본 에디터로 자동 복원됩니다.
댓글 에디터 툴바
댓글 특성에 맞게 게시글 작성 툴바보다 간소화된 구성입니다. (4-2 참고)💡 댓글 에디터 높이는 관리자 설정에서 변경할 수 있습니다 (기본값: 150px).
8. 자동번역
- 번역 대상: 선택된 텍스트
- 번역 결과: 선택 영역이 번역된 텍스트로 교체
- 지원 언어: 한국어, 영어, 일본어, 중국어, 스페인어, 프랑스어, 독일어 등
9. 내보내기
- PDF 내보내기: 현재 에디터 내용을 PDF 파일로 다운로드
- Word 내보내기: 현재 에디터 내용을 .docx 파일로 다운로드
10. 라이선스
| 라이선스명 | DesignOneX License (디자인원엑스 라이선스) |
| 원천 소유 | DesignOneX — designonex.com |
| 재배포·판매 | ❌ 금지 (원천 소스 90% 이상 수정 시 재배포·판매 가능) |
| 상업적 사용 | ✅ 상업적 프로젝트 제작에만 허용 (학습·개인 포트폴리오 포함) |
| 플러그인 원천 | plugin.php, core/, admin/ 자체의 재배포 및 판매 금지 |
| 보증 | 본 플러그인은 현재 상태 그대로 제공되며 어떠한 명시적·묵시적 보증도 없습니다. |
🚫 plugin.php, core/, admin/ 디렉터리의 코드를 그대로 또는 일부 수정하여 재배포하거나 판매하는 행위는 엄격히 금지됩니다.
🚫 DX CKEditor 4 Pro를 기반으로 제작한 에디터 서비스는 반드시 DesignOneX 라이선스 조건을 준수해야 합니다.
✅ 상업적 프로젝트 제작 및 사용은 허용됩니다. (학습·개인 포트폴리오 포함)
✅ 원천 소스를 90% 이상 수정한 경우 재배포·판매가 가능합니다.
✅ 원천 소스를 90% 이상 수정한 경우 재배포·판매가 가능합니다.
