본문 바로가기
Computer/Web

[CKEditor] 사용방법입니다.

by 생각하는달팽이 2015. 9. 22.

안녕하세요?

이번시간에는 CKEditor 사용법을 알아보겠습니다. 버전은 4.5.3 기준입니다.



1. 다음은 CKEditor 에서 커스터마이징하여 만든 압축파일입니다.




Ckeditor(url추가).zip





좀 더 다양한 옵션을 주고 싶으시다면, 혹은 더 단순한 기능을 원하신다면 아래 링크를 이용하여 기능들을 추가/제거 해주세요


CKEditor Builder



2. 압축을 푸시면 ckeditor 라는 폴더가 해당 폴더 안에 들어있을 것입니다. 






ckeditor 폴더를 복사하여 사용하실 path 아래로 옮겨주세요.



3. 아래는 제가 만든 index.html 의 소스입니다.


<!DOCTYPE HTML>
<html>
<head>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form style="height:500px;">
    <textarea name="editor1"id="editor1" rows="15" cols="80" >
    </textarea>
    <script> // Replace the <textarea id="editor1"> 
    // 옵션을 부여하고, editor1 이라는 녀석의 아이디를 에디터로 변환합니다.
    CKEDITOR.config.width = 500; // 넓이 
    CKEDITOR.config.height = 500; // 높이 // 퍼센트로 가능합니다. 
    CKEDITOR.config.language = 'ja'; //일본어 // 영어 en 
    CKEDITOR.replace( 'editor1' , {
        filebrowserImageUploadUrl: "ckeditor/plugins/imgupload.php"
    }); </script> 
</form>
</body>
</html>



4. CKEditor 관련해서 참고사항은 아래 도큐먼트를 참조하시면 됩니다.


CKEditor 도큐먼트




5. 주의해야할 부분은 이미지 업로드할 폴더의 권한을 CHMOD 0777 로 바꾸어줘야한다는 겁니다. ( 0777 까지는 필요 없을 것 같지만, 도큐멘트에는 그렇게 명시가 되어 있습니다. )




감사합니다.


반응형

'Computer > Web' 카테고리의 다른 글

Babel 에 대해서  (0) 2020.07.08
[mantis] QA 용 Template  (0) 2017.01.23
[Bootstrap,JQuery] Table을 이쁘게 정리하기  (0) 2016.02.24
[jQuery] Plugin 모음  (0) 2015.08.25
HTML5 새로운 내용들  (0) 2015.02.02