Ckeditor5 전용 게시판 스킨 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

Ckeditor5 전용 게시판 스킨 정보

게시판 Ckeditor5 전용 게시판 스킨

첨부파일

rumi_ckeditor.zip (5.3M) 29회 다운로드 2022-11-20 18:46:05 포인트 차감100
테스트한 버전5.5.8.2.3
호환 가능 버전5.5 이상

본문

본 스킨은 Ckeditor5 CDN을 사용하며, 기본적인 플러그인만 추가되어 있습니다. 플러그인을 추가하려면 온라인빌더를 이용하거나 직접 빌드후에 사용하시면 됩니다.

 

- 온라인빌더 바로가기 
https://ckeditor.com/ckeditor-5/online-builder

- 플러그인 추가하여 빌드하기 바로가기
https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/installing-plugins.html

 

# Ckeditor5 CDN 데모페이지
https://www.suu.kr/bbs/board.php?bo_table=rumi_ckeditor_cdn

 

 

업로드된 이미지 본문에 빠른 삽입 및 제거 기능

글작성시 또는 글 수정시 에디터의 하단에 업로드된 이미지의 썸네일을 본문에 추가하거나 삭제할 수 있습니다. 첨부된 이미지를 삭제시 본문에 추가되었다면 이미지를 제거합니다. 이미지 썸네일의 “추가”를 클릭하면 에디터 내용의 마지막에 추가를 할 수 있습니다. 썸네일을 마우스로 Drga하여 에디터의 본문에 Drop하면 원본이미지가 본문에 추가됩니다.

 

 

# Ckeditor5 이미지 업로드시 저장 방식 선택

Ckeditor5에서 이미지 업로드시 이미지 저장방식을 2가지 방법중 하나를 선택할 수 있습니다.

  1. 일반 저장 방식
    파일 저장 위치 : /data/editor/{년월}
  2. DB 저장 방식
    게시판 폴더 저장 및 업로드 파일 정보 DB 저장
    파일 저장 위치 : /data/file/{게시판아이디}

 

# 이미지 썸네일 폴더 별도 지정 가능

에디터에서 업로드된 모든 이미지정보가 DB에 저장되며, 이미지 파일은 “/data/file/{게시판테이블}”에 저장이 됩니다. 또한, 원본이미지와 썸네일 이미지를 분리하여 관리할 수 있도록 썸네일 파일을 추가로 생성하여 저장할 수도 있습니다. 
스킨 폴더의 “skin.lib.php” 파일에서 변경할 수 있습니다.

 

 

# 게시판 이미지 관리 기능 추가

에디터로 이미지를 업로드후 게시글 작성을 완료하지 않으면 업로드 된 이미지는 쓰레기 파일로 남아 있게 되고, 공간만 차지하는 쓰레기 파일로 존재하게 됩니다. 이러한 이미지들을 한꺼번에 삭제할 수 있도록 이미지 관리 기능을 제공합니다. 게시글에 등록되지 않은 이미지는 우측 상단에 붉은점으로 표시됩니다. 붉은점으로 표시된 이미지는 관리자가 임의로 삭제하여 저장 공간을 확보 할 수 있습니다. 

 

 

# Wepuploader (멀티업로드)

분할업로드 기능으로 서버에 제한을 받지 않고 대용량 파일을 업로드 할 수있습니다.  이미지 업로드 순서 변경하거, 이미지 회전를 회전 기능이 포함되어 있습니다. 업로드시 지정된 크기로 이미지를 리사이즈 하여 서버의 저장 공간을 절약할 수 있으며, 업로드 전에 이미지의 설명을 추가할 수 있습니다.

 

(선택 사항)
figure, figcaption, mark  태그를 사용하기 위해서는 html_purifier 함수를 수정해야 합니다.
- 수정 파일 : /lib/common.lib.php


$config->set('Filter.Custom', array(new HTMLPurifier_Filter_Iframevideo()));

 

함수내에서 위의 코드를 찾아 바로 아래줄에 다음 코드를 추가해 줍니다.
(추가 하지 않을 경우 "figure, figcaption, mark" 태그는 사용하지 못합니다.)

 


// ckeditor 사용시 추가될 내용 시작
$def = $config->getHTMLDefinition(true);
$def->addElement('figure', 'Block', 'Flow', 'Common');
$def->addElement('figcaption', 'Block', 'Flow', 'Common');
$def->addElement('mark', 'Inline', 'Inline', 'Common');
// ckeditor 사용시 추가될 내용 끝

 

 

 

 

본 스킨에서는 아래의 라이브러리가 포함되어 제작되었습니다.

번호 폴더명 설치 위치 비고 라이센스 공식홈
1 /plugin/lightbox2 / 이미지뷰어 MIT 바로가기
2 /plugin/webuploader / 멀티업로드 BSD 3-Clause 바로가기
3 ckeditor5 / ckeditor5 (CDN) GPL 바로가기
Github
4 /plugin/swiper-slide / 이미지 슬라이드 MIT 바로가기
5 /plugin/php-image-resize-master / 이미지 리사이즈 MIT 바로가기
6 /plugin/rumiPopup / 팝업 - 바로가기
7 /plugin/rumiPaging / ajax Paging - -

 

추천
14

댓글 전체

전체 2,192 |RSS
그누보드5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT