그누보드5에 ckeditor 최신버전 설치하기 (모바일 대응) > 그누보드5 플러그인

그누보드5 플러그인

그누보드는 여러가지 기능을 추가하기 쉽도록 제작 되었습니다.
플러그인 다운로드시 좋아요와 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y

그누보드5에 ckeditor 최신버전 설치하기 (모바일 대응) 정보

그누보드5에 ckeditor 최신버전 설치하기 (모바일 대응)

첨부파일

첨부파일 editor.lib.php (2.1K) 271회 다운로드 2017-07-28 20:56:58
첨부파일 imageUpload.zip (2.2K) 53회 다운로드 2017-07-28 20:56:58

본문

ckeditor은 오픈소스 텍스트 에디터

버전업을 거듭하면서 최근에는 타에디터들 못지않게 디자인이 매우 예뻐졌습니다^^

모바일, 반응형에서도 깔끔하게 구동되며 다양한 플러그인을 적용할 수 있는 ckeditor을 사용해봅시다




** 설치 가이드 **


1. 본 게시물의 editor.lib.php 를 다운로드




2. http://ckeditor.com/download 에서 ckeditor를 다운로드하여 압축해제합니다.

adapterssamples폴더는 필요없으니 삭제합시다.

cdc1a10b90381a52f2dbda8bf51d9664_1501231 




3. 그누보드폴더/plugin/editor에 위의 ckeditor폴더를 복사한 뒤,

editor.lib.php를 ckeditor폴더에 넣어줍니다.
cdc1a10b90381a52f2dbda8bf51d9664_1501231




4. 그누보드폴더/config.php 에서 다음부분을 true로 설정해야 모바일에서도 에디터사용이 가능합니다.
cdc1a10b90381a52f2dbda8bf51d9664_1501231




5. 기본환경설정에서 에디터ckeditor로 설정합니다.
cdc1a10b90381a52f2dbda8bf51d9664_1501231




6. DHTML 에디터를 사용할 게시판에서 에디터 사용을 체크합니다.

cdc1a10b90381a52f2dbda8bf51d9664_1501231
 



7. 다음과 같이 글쓰기화면에서 ckeditor이 적용된 모습을 확인할 수 있습니다.

cdc1a10b90381a52f2dbda8bf51d9664_1501231
 




** 참고용 수정 가이드 **


ckeditor폴더의 config.js를 수정하면 기능 추가 및 수정이 가능합니다.


config.allowedContent = true;

아이프레임 등의 소스코드가 걸러지는걸 막습니다.

(적용하셔도 그누보드 자체 출력 필터링은 그대로 적용되니 보안에 문제 없다고 봅니다.)


config.height = 300;

에디터 높이 설정


config.removeButtons = 'Underline,Subscript,Superscript';

NumberedList,BulletedList,Outdent,Indent 등 입력시 안쓰는 기능 삭제가 가능합니다. 


그 밖에도

- 처음부터 커스터마이즈를 통해 다운로드

- 또는 추가 애드온 다운로드 후 config.js에서 적용

등을 통해 애드온 추가가 가능합니다.


모바일에서는 미디어쿼리를 사용하여 버튼을 간결하게 정리하면 좋습니다.


스탠다드 버전에 없는 기능 중 추천드리는 애드온

글자색상선택 http://ckeditor.com/addon/colorbutton 

문장정렬 http://ckeditor.com/addon/justify 

폰트크기조절 http://ckeditor.com/addon/font 

입력창크기 자동조절 http://ckeditor.com/addon/autogrow 

imgur를 통한 이미지업로드 http://ckeditor.com/addon/imgur 





** 이미지 업로드 기능 추가 **


1. imageUpload.zip를 다운로드 및 압축해제하여 아래와 같이 ckeditor 폴더에 업로드

cdc1a10b90381a52f2dbda8bf51d9664_1501243
 

2. config.js에 다음 코드를 추가합니다

config.filebrowserUploadUrl = g5_editor_url+"/imageUpload/upload.php";

댓글 전체

plugin / editor / ckeditor / config.js 에 추가합니다.
예를 들어 imgur 기능을 추가하려면 아래의 내용을 추가하면 기능이 작동합니다.
config.extraPlugins = 'imgur';
답변해주셔서 감사합니다.
    config.extraPlugins = 'autogrow';
    config.extraPlugins = 'font';
    config.extraPlugins = 'justify';
    config.extraPlugins = 'colorbutton';
    config.extraPlugins = 'imgur';

config.js에 이런식으로 추가를 했는데요 imgur만 나오고 나머지는 추가가 안되는데 왜 그런지 혹시 짐작가는 부분 있으신가요?
다시한번 감사합니다.
에디터의 사진 기능으로 업로드시 에디터에는 이미지가 잘 표시되고 업로드도 잘 되었는데 404메시지가 나타나네요.. 드래그앤드랍으로는 이미지 업로드가 안되고 404가 나오구요.. 왜 이런걸까요?
전체 25
그누보드5 플러그인 내용 검색

회원로그인

진행중 포인트경매

  1. 마르코☆ 의 명함제작 (feat: 스캐폴더님)

    참여4 회 시작18.02.21 16:04 종료18.02.24 16:04
  2. [해피정님 추천도서] PHP7 예비학교

    참여80 회 시작18.02.19 18:44 종료18.02.24 18:44

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT