게시판이나 블로그 등을 만들 때 글 작성을 위해서는 텍스트 편집기가 필요합니다.
그러나 제대로된 텍스트 편집기를 직접 만들기에는 시간이 많이 들기 마련입니다.
따라서 Ckeditor가 제공하는 편집기를 가져다가 사용할 수 있습니다.
링크를 타고 들어가 ckeditor4를 활용하기 위한 파일들을 다운받을 수 있습니다.
위 사이트에서 용도에 맞게 끔 적절한 패키지를 다운받습니다.
2. ckeditor.js파일을 에디터를 사용하고자 하는 html 파일에 경로를 지정해줍니다.
3. Ckeditor를 위치시키고 싶은 자리에 아래의 코드를 추가시켜줍니다.
4. ckeditor 폴더 내 config.js파일에 3번에서 작성한 html코드 위치에 Ckeditor가 적용될 수 있도록 지정해줍니다.
즉, 위에서 지정한 id로 된 textarea에 에디터를 적용한다라고 이해하시면 됩니다.
[Basic package 설정 후 모습]
추가 설정
ckeditor는 ckeditor 폴더 내부에 위치하는 config.js파일로 각종 추가 설정을 할 수 있습니다.
기본적인 기능들은 구현되어 있으니 저는 굳이 추가 설정을 하진 않았습니다.
추가 설정을 위한 자세한 내용은 https://ckeditor.com/docs/ckeditor4/latest/api/index.html 를 참고하시면 되겠습니다.
이상으로 Ckeditor4 간편 사용법을 알아보았습니다. 감사합니다.
그러나 제대로된 텍스트 편집기를 직접 만들기에는 시간이 많이 들기 마련입니다.
따라서 Ckeditor가 제공하는 편집기를 가져다가 사용할 수 있습니다.
Ckeditor 다운받기
ckeditor4 : https://ckeditor.com/ckeditor-4/download/링크를 타고 들어가 ckeditor4를 활용하기 위한 파일들을 다운받을 수 있습니다.
위 사이트에서 용도에 맞게 끔 적절한 패키지를 다운받습니다.
사용법
1 . 다운받은 ckeditor 폴더를 사용할 프로젝트의 폴더 내부에 넣어줍니다.2. ckeditor.js파일을 에디터를 사용하고자 하는 html 파일에 경로를 지정해줍니다.
|
1
|
<script src = "${path}/ckeditor/ckeditor.js"></script>
|
cs |
3. Ckeditor를 위치시키고 싶은 자리에 아래의 코드를 추가시켜줍니다.
|
1
|
<textarea id="[editor 이름]" name="content"></textarea>
|
cs |
4. ckeditor 폴더 내 config.js파일에 3번에서 작성한 html코드 위치에 Ckeditor가 적용될 수 있도록 지정해줍니다.
즉, 위에서 지정한 id로 된 textarea에 에디터를 적용한다라고 이해하시면 됩니다.
|
1
2
3
|
$(document).ready(function() {
CKEDITOR.replace('[editor 이름]');
});
|
cs |
[Basic package 설정 후 모습]
추가 설정
ckeditor는 ckeditor 폴더 내부에 위치하는 config.js파일로 각종 추가 설정을 할 수 있습니다.
기본적인 기능들은 구현되어 있으니 저는 굳이 추가 설정을 하진 않았습니다.
추가 설정을 위한 자세한 내용은 https://ckeditor.com/docs/ckeditor4/latest/api/index.html 를 참고하시면 되겠습니다.
이상으로 Ckeditor4 간편 사용법을 알아보았습니다. 감사합니다.
댓글