요줌 CMS 홈페이지에 많이 사용되는 에디터인 Ckeditor에 플러그인과 스킨 설치하는 방법을 설명드리겠습니다.
[플러그인 설치}
https://ckeditor.com/cke4/addons/plugins/all
접속하면 여러가지의 플러그인들이 있습니다.
그중에 자기가 필요한 것을 찾아서 설치하시면 됩니다.
[설치방법 - Youtube Plugin]
1. https://ckeditor.com/cke4/addon/youtube 에서 "Download"를 클릭하면 프로그램을 다운받으면서
설치 팝업창이 뜹니다.
2. 다운받은 youtube_2.1.8.zip 파일의 압축을 풀어서 youtube 폴더를 아래 폴더에 업로드합니다.
일반적인 경우는 http://example.com/ckeditor/plugins/youtube
XE의 경우는 /common/js/plugins/ckeditor/ckeditor/plugins/youtube
3. XE의 경우는 처음 설치일때는
/common/js/plugins/ckeditor/ckeditor/ 폴더안에 config.js 파일을 아래와 같이 만들어서 올립니다.
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'youtube';
};
4. 라이믹스의 경우는 간단합니다.
관리자화면의 "에디터"에 들어가면 "
youtube 라고 작성하면 됩니다. 플러그인이 여러개인 경우 , 로 구분하면 됩니다.
wenzgmap는 구글지도 플러그인입니다.
[플러그인 전]
[YouTube 플러그인 설치 후]
YouTube버턴(빨간테두리)을 클릭하면
[스킨 설치]
Ckeditor에 스킨 설치하는 방법을 설명드립니다.
https://ckeditor.com/cke4/addons/skins/all 에 가면 몇가지의 스킨들이 존재합니다.
그 중에 Moono 와 Moono Dark, Moono-Lisa 는 XE에는 기본으로 설치가 되어 있습니다.
그럼 다른 스킨을 설치하는 방법을 설명드립니다.(예제로 moonocolor)
일단 해당 스킨을 클릭해서 들어가면 스크린샷이 보입니다.
마음에 들면 Download를 클릭하면 파일이 다운되면서 설치 팝업창이 출력됩니다.
moonocolor_4.5.1.zip 압축을 풀어서 moonocolor폴더를 업로드합니다.
일반적인 경우는 http://example.com/ckeditor/skins/moonocolor
XE의 경우는 /common/js/plugins/ckeditor/ckeditor/skins/moonocolor
플러그인 부분에서 config.js를 만들었다면 편집을 하시면 되고 없다면 만드시면 됩니다.
/common/js/plugins/ckeditor/ckeditor/config.js
CKEDITOR.editorConfig = function( config ) {
config.language = 'ko';
config.uiColor = '#E8F3F8';
config.extraPlugins = 'youtube';
config.skin = 'moonocolor';
};
빨간색부분이 스킨을 설정하는 부분입니다.
config.language = 'ko'; 은 언어설정(예:en은 영어)
config.uiColor = '#E8F3F8'; 은 배경색상을 지정
moonocolor스킨과 바탕색 #E8F3F8를 지정한 모습입니다.
