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

그누보드5 플러그인

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

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

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

첨부파일

첨부파일 editor.lib.php (2.1K) 425회 다운로드 2017-07-28 20:56:58
첨부파일 imageUpload.zip (2.2K) 80회 다운로드 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";
추천11

댓글 전체

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가 나오구요.. 왜 이런걸까요?
너무너무 감사 합니다.
적용 잘되서 설치는 잘된것 갇습니다.
그런대 사실 이미지 때문에 선택했는대요.
이미지 버튼을 누르면 그누홈피에서는 바로 찿기화면이 나오는대,
첨부 이미지 갇은 화면이 나타납니다.


upload를 누르고 이미지파일을 선택하고 새이브서버 해야 그림이 등록이 되는대요.
그누 홈피처럼 바로 선택창이 나오고, 선택하면 바로 등록되게 하려면
어디를 어떨게 수정해 줘야 하는지 가르처 주시길 부탁드립니다.
감사 합니다.
적용이 안되서 사이트 찾아보니..
CDN을 추가 해줘야 되는군요..ㅎㅎ
한 줄 추가하자마자 바로 뙇!!
테스트부터 해봐야겠습니다 ㅎ 감사합니다.
전체 32
그누보드5 플러그인 내용 검색

회원로그인

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

© SIRSOFT