CKEditor4 사용하기 - 다운로드 및 플러그인 적용

CKEditor4 다운로드 및 적용 방법에 대해 정리해보려 한다.

 

1. 먼저 CKEditor4 다운로드 홈페이지에 접속한다.  https://ckeditor.com/ckeditor-4/download/

CKEditor 4 - Download Latest Version

 

 

접속하면 아래와 같은 화면을 볼 수 있는데,

여기서, Basic, Strandard, Full Package를 그대로 사용하는 경우에는 원하는 버전에 맞게 바로 CDN을 복사하여 사용하거나, 직접 압축파일을 다운로드할 수 있다.

나 같은 경우는 Standard Package에 폰트 색상, 폰트 배경 색상을 선택할 수 있는 플러그인을 추가하고 싶어서

Customize에서 볼 수 있는 Online Builder로 이동했다.

 

 

 

 

2. Online Builder로 이동해서 원하는 기능만 넣고 제거해서 간편하게 원하는 기능의 에디터를 만들 수 있다.

Standard 기능에 Color Button(폰트 색상)과 Font Size and Faimily(폰트 사이즈, 글꼴) 선택 플러그인을 추가했다.

처음에 바보같이 Color Dialog가 폰트 색상 버튼인 줄 알고 추가했다가 잠깐 헤맸었는데 다른 분들은 이렇게 헤매지 않길,,, Youtube Plugin도 추가할 수 있어서 다음번에 기회가 되면 사용해보도록 해야겠다.

 

 

 

3. 사용할 스킨과 언어를 선택하고 다운로드를 진행한다.

 

 

 

4. 다운로드 파일의 압축을 풀고 서버에 파일을 업로드한다.

이제 CKEditor4의 적용 방법을 알아보자.

CDN을 사용하는 경우 복사한 내용을 적용하고, 파일을 다운로드한 경우에는 ckeditor.js의 경로를 아래와 같이 넣어준다.

CKEditor가 적용될 부분의 name을 CKEDITOR.replace('') 괄호 안에 기입하면 끝이다.

 

<script src="/js/ckeditor4/ckeditor.js"></script>
<textarea name="editor" id="editor" rows="10" cols="80"></textarea>
<script>
    CKEDITOR.config.height = 300;
    CKEDITOR.replace('editor')
</script>

 

 

 

5. 아래와 같이 내가 원하는 컬러 버튼과 폰트 사이즈 버튼이 페이지에 적용된 모습을 확인할 수 있다.

 

다음 글에서는 이미지 업로드 적용 방법에 대해 정리해보자.