G7 CKEditor5 확장 플러그인 - Glitter CKEditor5 Expansion
그누보드7 CKEditor 5에 SNS 임베드, 링크 미리보기, HTML5 동영상 업로드·재생 제어, 마크다운 렌더링, 이미지 붙여넣기 및 다양한 편집 기능을 추가하는 오픈소스 확장 플러그인.
Gnuboard7용 SNS 임베드 · 외부 링크 미리보기 · HTML5 동영상 · 마크다운 · 편집기 기능 확장 플러그인
버전:
0.1.4· 개발: Glitter.kr · 라이선스: MIT
GitHub: https://github.com/glitter-node/glitter-ckeditor5_expansion
릴리스: https://github.com/glitter-node/glitter-ckeditor5_expansion/releases/tag/v0.1.4
ZIP 다운로드: glitter-ckeditor5_expansion-v0.1.4.zip
TAR.GZ 다운로드: glitter-ckeditor5_expansion-v0.1.4.tar.gz
소개
Glitter CKEditor5 Expansion은 그누보드7(Gnuboard7)의 CKEditor 5에 SNS 콘텐츠 임베드, 외부 링크 미리보기, HTML5 동영상 업로드 및 재생 제어, 마크다운 렌더링, 이미지 업로드와 추가 편집 기능을 제공하는 독립형 플러그인입니다.
YouTube, X(Twitter), Instagram, TikTok 콘텐츠를 게시글에 삽입하고, 외부 URL을 미리보기 카드로 표시할 수 있습니다.
또한 로컬 동영상 업로드와 자동 재생·음소거·반복 재생 설정을 지원하며, 방문자가 게시글에서 반복 재생 여부를 직접 변경할 수도 있습니다.
이 플러그인은 William Cho 님의 CKEditor 5 Superpack (g7-ckeditor5-superpack) 일부를 기반으로 수정·확장한 프로젝트입니다.
기존 플러그인과 별도의 식별자 및 설정·저장 영역을 사용하며, Glitter.kr에서 독립적으로 유지·관리합니다.
주요 기능
| 영역 | 제공 기능 |
|---|---|
| SNS 임베드 | YouTube, X(Twitter), Instagram, TikTok |
| 외부 링크 미리보기 | URL 미리보기 카드, 서버 측 검증, SSRF 방어 |
| HTML5 동영상 | 분할 업로드, 재생, 파일 정리 |
| 동영상 재생 옵션 | Autoplay, Muted, Loop |
| 반복 재생 제어 | 게시글에서 Loop ON/OFF 전환 |
| 마크다운 | 방문자 화면에서 마크다운 렌더링 |
| 글자 서식 | 글꼴 크기, 줄 간격 |
| 코드 서식 | 인라인 코드, 코드 블록, 복사 기능 |
| 이미지 업로드 | 클립보드 이미지 업로드, 선택적 PNG → WebP 변환 |
| 다국어 | 한국어·영어 UI 및 메시지 |
SNS 콘텐츠 임베드
다음 SNS 플랫폼의 콘텐츠 삽입 및 표시를 지원합니다.
- YouTube: 동영상 임베드
- X(Twitter): 게시물 임베드
- Instagram: 콘텐츠 임베드
- TikTok: 동영상 및 콘텐츠 임베드
지원되는 미디어 링크를 감지하여 게시글 내에서 표시할 수 있습니다.
실제 임베드 표시 여부는 대상 서비스의 정책, 브라우저 환경 및 사이트의 콘텐츠 보안 정책(CSP)에 영향을 받을 수 있습니다.
외부 링크 미리보기
게시글에 포함된 외부 URL을 링크 미리보기 카드 형태로 표시하는 기능을 제공합니다.
주요 처리 기능은 다음과 같습니다.
- 외부 URL 검증
- SSRF(Server-Side Request Forgery) 방어
- 미리보기 응답 캐싱
- 요청 횟수 제한(Rate Limiting)
- 지원되는 링크의 미리보기 카드 렌더링
외부 사이트에서 메타데이터를 제공하지 않거나 서버 접근을 제한하면 미리보기 결과가 달라질 수 있습니다.
HTML5 동영상 업로드 및 재생
로컬 동영상 파일을 분할 업로드하고, 게시글에서 HTML5 동영상으로 재생할 수 있습니다.
v0.1.4에서는 동영상 재생 관련 옵션을 확장했습니다.
| 옵션 | 기능 |
|---|---|
| Autoplay | 가능한 경우 동영상 자동 재생 |
| Muted | 음소거 상태로 재생 |
| Loop | 동영상 종료 후 반복 재생 |
playsinline |
모바일 환경에서 인라인 재생을 지원하도록 자동 적용 |
Autoplay를 선택하면 Muted도 자동으로 활성화됩니다.
이는 브라우저의 자동 재생 제한 정책을 고려한 동작입니다. 실제 자동 재생 가능 여부는 브라우저와 사용자 환경에 따라 달라질 수 있습니다.
playsinline은 별도로 선택하는 옵션이 아니라 동영상 출력 시 자동으로 적용됩니다.
자동 재생을 사용하지 않는 경우에는 일반적인 수동 재생이 가능합니다.
기존 게시글에 삽입된 동영상과의 호환성도 유지하도록 구성했습니다.
게시글에서 Loop ON/OFF 전환
v0.1.4에는 방문자가 동영상의 반복 재생을 직접 변경할 수 있는 기능이 추가되었습니다.
- 동영상 아래에 Loop ON/OFF 버튼 표시
- 페이지 새로고침 없이 반복 재생 상태 변경
- 반복 재생을 켜면 동영상 종료 후 다시 재생
- 재생이 끝난 상태에서 Loop를 켜면 다시 재생 시작
- Loop를 끄면 현재 재생을 정상적으로 마친 뒤 종료
- 한 게시글에 동영상이 여러 개 있어도 개별적으로 설정
- 버튼 상태 및 키보드 접근성 지원
방문자가 변경한 Loop 상태는 현재 화면의 재생 동작에만 적용됩니다.
게시글에 저장된 원래 동영상 설정이나 파일 URL을 변경하지 않습니다.
마크다운 및 편집 기능
마크다운 렌더링
방문자 화면에서 인라인 및 블록 형태의 마크다운 콘텐츠를 렌더링하는 기능을 제공합니다.
글자 및 문단 서식
- 글꼴 크기 조절
- 줄 간격 조절
- 코드 서식 지정
- 코드 블록 삽입
- 코드 블록 복사
이미지 붙여넣기
클립보드에 복사한 이미지를 편집기에 붙여넣어 업로드할 수 있습니다.
PNG 이미지의 WebP 변환을 선택적으로 지원하며, 이미지 업로드 검증 및 보호 처리가 포함되어 있습니다.
설치 요구 사항
| 항목 | 요구 사항 |
|---|---|
| Gnuboard7 | 7.0.10 이상 |
| 필수 플러그인 | sirsoft-ckeditor5 |
| CKEditor 5 의존성 버전 | 1.0.3 이상 |
| PHP | 설치된 Gnuboard7과 호환되는 환경 |
| Node.js / npm | 일반 설치 시 불필요 |
| 라이선스 | MIT |
sirsoft-ckeditor5는 반드시 별도로 설치하고 활성화해야 합니다.
Glitter CKEditor5 Expansion은 CKEditor 5 자체를 포함하는 배포물이 아닙니다.
기존 CKEditor 5 기능 위에 추가 기능을 제공하는 독립형 확장입니다.
설치 및 업데이트
Plugin ID: glitter-ckeditor5_expansion
Version: 0.1.4
Repository: https://github.com/glitter-node/glitter-ckeditor5_expansion
관리자 페이지에서 설치
그누보드7의 플러그인 관리 기능을 이용하여 설치할 수 있습니다.
1. GitHub 저장소
GitHub 공개 저장소:
https://github.com/glitter-node/glitter-ckeditor5_expansion
사용 중인 그누보드7 버전에서 GitHub 저장소 설치 기능을 제공하는 경우 해당 기능을 이용할 수 있습니다.
2. ZIP 패키지
GitHub Release에서 플러그인 설치용 ZIP 파일을 다운로드합니다.
glitter-ckeditor5_expansion-v0.1.4.zip 다운로드
그누보드7 관리자에서 지원하는 플러그인 파일 업로드 기능으로 설치하거나, 압축을 해제한 glitter-ckeditor5_expansion 디렉터리를 plugins/에 배치한 뒤 플러그인 설치 절차를 진행합니다.
설치 전에 sirsoft-ckeditor5 의존성이 설치 및 활성화되어 있는지 확인하세요.
Artisan 명령으로 설치
그누보드7 프로젝트 루트에서 실행하는 예시입니다.
php artisan plugin:install glitter-ckeditor5_expansion
php artisan plugin:activate glitter-ckeditor5_expansion
서버에 여러 PHP 버전이 설치되어 있다면 그누보드7과 호환되는 CLI PHP 실행 파일을 사용하세요.
기존 설치 업데이트
그누보드7 플러그인 관리 시스템에서 제공하는 업데이트 절차를 사용하세요.
php artisan plugin:update glitter-ckeditor5_expansion
개발·운영 환경에서 플러그인의 bundled 소스를 별도로 관리한다면 다음 명령을 사용할 수 있습니다.
php artisan plugin:update glitter-ckeditor5_expansion --source=bundled --force
--source=bundled --force는 bundled 소스를 명시적으로 적용하는 환경을 위한 명령입니다. 일반적인 ZIP 설치에 반드시 필요한 옵션은 아닙니다.
실제 업데이트 전에 데이터베이스와 파일을 백업하고, 사용 중인 그누보드7 버전의 플러그인 관리 절차를 확인하세요.
배포 파일 구성
공개 배포본에는 플러그인 실행에 필요한 PHP 소스, 설정, 데이터베이스 마이그레이션, 관리자 리소스 및 JavaScript 파일이 포함됩니다.
주요 JavaScript 파일은 다음과 같습니다.
resources/js/index.js
dist/js/plugin.iife.js
resources/js/src/
배포본에는 사전 빌드된 JavaScript가 포함되어 있습니다.
따라서 일반 사용자는 Node.js, npm, Vite 등의 프런트엔드 빌드 환경을 설치할 필요가 없습니다.
개발 전용 package.json 및 scripts/ 디렉터리는 공개 배포본에 포함하지 않습니다.
v0.1.4 주요 변경 사항
HTML5 동영상 기능 개선
- Autoplay, Muted, Loop 설정 추가
- Autoplay 선택 시 Muted 자동 적용
- 모바일 인라인 재생을 위한
playsinline지원 - 기존 동영상 콘텐츠와의 호환성 유지
- 브라우저 자동 재생 제한 상황의 오류 처리 개선
Loop 버튼 추가
- 게시글 동영상 아래 Loop ON/OFF 버튼 제공
- 동영상별 독립적인 반복 재생 제어
- 재생 종료 후 Loop 활성화 시 다시 재생
- 저장된 게시글 데이터 변경 없이 재생 상태 전환
- 접근성 상태 및 포커스 표시 개선
다국어 및 사용성
- 한국어·영어 메시지 개선
- 동영상 제어 화면 개선
- Loop 버튼의 접근성 속성 추가
테스트 및 검증 현황
v0.1.4 개발 및 배포 과정에서 확인된 항목
- JavaScript 빌드 성공
- JavaScript 빌드 결과 일치 검증
- JavaScript 구문 검사 통과
- PHP 구문 검사 통과
- JSON 및 Composer 검증 통과
- bundled 소스 기반 플러그인 업데이트 성공
- 설치된 플러그인의 버전 및 활성화 상태 확인
- bundled·설치본 JavaScript 파일 SHA-256 비교
별도 확인이 필요한 항목
- Chrome 환경에서의 실제 동영상 재생 및 Loop 버튼 동작
- 모바일 브라우저의 자동 재생 및 인라인 재생
- 다양한 환경의 SNS 임베드 및 링크 미리보기
- 다른 편집기 관련 확장과의 동시 사용
자동화 테스트 전체를 실행한 릴리스는 아닙니다.
위 검증 결과는 개발·배포 단계의 확인 사항이며 모든 브라우저와 운영 환경에서의 동작을 보증하는 것은 아닙니다.
기존 플러그인 및 CKEditor 5와의 관계
Glitter CKEditor5 Expansion은 기존 CKEditor 5 Superpack을 단순히 이름만 변경한 배포물이 아닙니다.
원저작물의 일부를 기반으로 기능을 수정·확장하고, 별도 플러그인 식별자와 설정·라우트·저장 구조를 사용하는 독립 프로젝트입니다.
| 항목 | 설명 |
|---|---|
sirsoft-ckeditor5 |
CKEditor 5를 제공하는 필수 의존성 |
g7-ckeditor5-superpack |
원저작물 일부를 참고·수정한 기존 플러그인 |
glitter-ckeditor5_expansion |
Glitter.kr에서 독립적으로 유지·관리하는 확장 플러그인 |
기존 Superpack과 기능이 중복되므로 두 확장을 동시에 활성화하는 구성은 일반적으로 권장하지 않습니다.
또한 sirsoft-ckeditor5 자체의 코드를 직접 수정하지 않습니다.
유의 사항
- CKEditor 5 의존성은 별도로 설치해야 합니다.
- 브라우저 정책에 따라 자동 재생이 제한될 수 있습니다.
- SNS 임베드는 외부 서비스 정책과 CSP 설정의 영향을 받을 수 있습니다.
- 외부 링크 미리보기는 대상 사이트의 접근 정책에 영향을 받습니다.
- 다른 편집기·업로드 확장과 함께 사용하는 경우 호환성을 확인해야 합니다.
- 동영상 업로드 허용 크기와 서버의 파일 업로드 설정을 확인해야 합니다.
- 운영 사이트 적용 전 별도 테스트 환경에서 기능을 확인하는 것을 권장합니다.
저작권 및 라이선스
원저작
CKEditor 5 Superpack (g7-ckeditor5-superpack)
Copyright (c) 2026 William Cho
수정 및 확장
Glitter CKEditor5 Expansion
Copyright (c) 2026 Glitter.kr
원저작물의 MIT 라이선스 및 저작권 표시를 유지하며, Glitter.kr에서 수정·확장한 부분을 별도로 명시합니다.
라이선스: MIT License
자세한 내용은 GitHub 저장소의 LICENSE 파일을 참고하세요.
CKEditor 5는 sirsoft-ckeditor5 의존성을 통해 별도로 제공되며, 해당 프로젝트 및 제3자 구성 요소에는 각각의 라이선스가 적용됩니다.
Glitter CKEditor5 Expansion v0.1.4는 그누보드7의 CKEditor 5에서 SNS 콘텐츠, 외부 링크, HTML5 동영상, 마크다운, 이미지 및 코드 편집 기능을 확장하기 위한 오픈소스 플러그인입니다.
GitHub: https://github.com/glitter-node/glitter-ckeditor5_expansion
Release: https://github.com/glitter-node/glitter-ckeditor5_expansion/releases/tag/v0.1.4
ZIP: https://github.com/glitter-node/glitter-ckeditor5_expansion/releases/download/v0.1.4/glitter-ckeditor5_expansion-v0.1.4.zip
TAR.GZ: https://github.com/glitter-node/glitter-ckeditor5_expansion/releases/download/v0.1.4/glitter-ckeditor5_expansion-v0.1.4.tar.gz
License: MIT
이 개발자의 다른 프로젝트
와~~~ 잘 됩니다 감사합니다.
(●'◡'●)
(●'◡'●)