팁 & 테크

최근본상품
TOP
DOWN

팁 & 테크

Ckeditor 이미지 가운데 정렬

2015.06.03 11:59 7,067 9

본문

기존 이윰빌더에서 배포한 ckeditor 와 기존 그누보드에서 배포하는 ckeditor는 이미지 가운데 정렬 기능이 없습니다.
소스보기(가운데 정렬일때)를 통해 <p style="text-align:center">이미지태그</p>를 사용하면 여간 불편한게 아니지요?

그래서 다음 플러그인을 소개할까 합니다.
"Enhanced Image"라고 하는 플러그인이며 다운로드 주소는 아래와 같습니다.
http://ckeditor.com/addon/image2


위 플러그인을 사용하기 위해서는 다음과 같은 과정이 필요합니다.

1. 다운 받은 압축파일을 풀어 image2 폴더(폴더안에 plugin.js가 있음을 확인)를 그누보드5/plugin/editor/ckeditor4_eyoom/plugins 폴더에 복사합니다.

2. 기존 이미지(image) 플러그인을 사용치 않습니다.
그누보드5/plugin/editor/ckeditor4_eyoom/config.js 를 열어 config.removeButtons = 을 찾습니다.
아래 소스를 참고합니다.


    config.removeButtons = 'Save,Copy,Cut,Iframe,Scayt,Flash,Styles,Format,Strike,Smiley,Image,About';

3. image2 플러그인을 사용토록 하기 위하여 다음과 같이 작업합니다.
그누보드5/plugin/editor/ckeditor4_eyoom/config.js 를 열어 config.extraPlugins= 을 찾습니다.
아래 소스를 참고하여 새로운 플러그인을 추가합니다.

    config.extraPlugins='image2';


에디터를 띄워 이미지를 업로드하면 이미지 크기를 임의적으로 바꿀 수 있는 아웃라인이 생겨나고 이미지를 더블 클릭하게 되면 추가적인 대화창이 다음과 같이 나타납니다.

0
로그인 후 평가 가능합니다.
- shadow - 회원등급 : 중간계 / Level 19
포인트 674,464
경험치 36,425
[레벨 19] - 진행률 59%
- 가입일 : 2015-02-26 22:28:15
- 서명 : 미입력
- 자기소개 : 미입력

댓글목록 9

fm25님의 댓글

fm25 2015.06.03 13:47

'config.removeButtons' 라는 것은... 제외한다는 뜻이지요?
그런데 저는 'image2'를 입력해야 적용되네요.

'config.extraPlugins'는 전체가 주석으로 감싸져 있어서...
config.extraPlugins='image2';
만 밖에 추가했구요.

축하합니다. 첫댓글 포인트 21포인트를 획득하였습니다.

shadow님의 댓글

shadow 2015.06.03 13:52

네 말씀하신것 처럼 config.removeButtons 는 툴바에서 아이콘을 제거(결국 사용치 않는다 정도로 생각하시면되구요 확실하게 사용치 않기 위해서는 plugins 폴더내에 image 폴더를 삭제하시면 되구요)하는 의미이고
config.extraPlugins 은 추가적으로 플러그인을 사용한다 의미로 이해하시면 될 듯 합니다.

축하합니다. 행운의 포인트 65포인트를 획득하였습니다.

fm25님의 댓글

fm25 2015.06.03 18:10

사용하는 것(image2)을 제외 목록에 등록하는 것이 께림칙했는데...
'image' 폴더를 삭제하니까... 제외 목록에 등록할 필요가 없네요.

한가지 아쉬운 것은 이미지 링크 기능이 없다는 것이네요.
뭐 사용할 일도 거의 없겠으나...

shadow님의 댓글

shadow 2015.06.03 18:16

테스트해보지는 않았지만 아마 될 겁니다.
이미지 정보의 URL란에 외부 이미지 주소를 입력하면요 ^^;

fm25님의 댓글

fm25 2015.06.03 18:23

외부 이미지는 되고... 직접 '업로드'하고 주소를 바꾸는 것은 안되는군요.

홍인님의 댓글

홍인 2015.06.04 10:25

기존 ckeditor에 있던 이미지아이콘은 사실상 쓸모가 없는데 아이콘이 에디터에 나타나지 않게 하는 방법은 없을까요?

fm25님의 댓글

fm25 2015.06.04 10:52

위의 2번 항목이 제외하는 것입니다.
저는 약간 오류가 있는데... 홍인님은 'image'와 'image2' 아이콘이 둘 다 뜨나요?

홍인님의 댓글

홍인 2015.06.04 11:14

제가 잘못했네요.
image2 추가하는 곳에 다른 플러그인이 dlT는데 추가하는 모든 플러그인을 한 ' ' 속에 다 넣어야 하는거네요.

암스원님의 댓글

지금은 스마트에디터2가 들어 있는데요. ckeditor4_eyoom 요파일은 어디서 구할 수 있나요?