8. ckeditor에 plugins 추가하기 (add-on, customizing)

8. ckeditor에 plugins 추가하기 (add-on, customizing)

 

 

1) 원하는 plugin을 각각 다운받아 ckeditor의 plugins폴더 안에 넣고 config.js안에

config.extraPlugins = 'plugin이름'; //하나일 경우.

config.extraPlugins = 'plugin이름1,plugin이름2,plugin이름3'; //여러 개일 경우 공백 없이.

을 입력한다. 일단 'youtube'는 된다.

안 되는 것도 있던데.. (html5audio, mathjax는 됐다 말았다 한다.)

 

2) ckeditor를 다운 받을 때 커스터마이징 페이지로 들어가서 원하는 plugin을 추가한 후 다운받기.

이때는 config.js에서 plugin을 추가설정을 안 해도 되는 것 같은데..

이 경우 plugin은 ckeditor팀이 만든 것이 아니라 실행 시 문제가 있을 수도 있다고 한다.

plugin을 추가할 때 뭔가가 잘못되면 tool 메뉴가 통째로 사라져 버린다.

 

[해결]

config.js말고 ckeditor.js를 열고 아래로 내려가 보면 CKEDITOR.config.plugins 부분이 있다.

CKEDITOR.config.plugins = 'dialogui,dialog,about,a11yhelp,……

media embed라는 plugin을 ckeditor의 커스터마이징 페이지에서 자동으로 추가한 후 down을 받았다면 ckeditor.js안에 자동으로 설정이 되는 것 같다.

CKEDITOR.config.plugins 부분에서 embedbase와 embed를 찾아 지우면 실제 tool메뉴에서 버튼이 사라진다.

물론 plugins폴더 안에 embedbase폴더도 지웠다.

이걸 모르고 config.js안에 config.removeButtons 값에다 암만 넣어도 지워지질 않아서 고생했다.

플러그인을 성공한 ckeditor와 실패한 ckeditor를 폴더별로 비교를 해 보았더니 양쪽의 plugins/lang안에 en.js와 ko.js가 있었지만 size가 다르길래 성공한 쪽의 ko.js와 en.js를 복사해 바꾸었더니 바로 tool메뉴가 떴다.

그리고 필요 없는 embedbase 버튼을 위의 방법으로 없앴다.

 

plugin을 추가했는데 버튼이 안 생긴다던지 tool메뉴가 사라진다던지 하면 ckeditor.js를 확인해 보자.

 

 3) 업로드 창에 뜨는 정체불명의 영문 텍스트를 없애기.

ckeditor/plugins/image/dialogs/image.js의 11줄 중간에 그 내용이 있다.

그 내용을 다음과 같이 바꾸거나 지워버리면 된다.

 

[원본]

'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas……

 

[수정]

'이 화면에서 보이는 문구는 사용자가 업로드 한 이미지가 실제 화면에 어떻게 배치되는지를 보다 명확히 알 수 있도록 하기 위해 쓰여진 것입니다. 실제 화면에는 나타나지 않습니다.'