CKEditor

CKEditor 란

 

CKEditor는 위지윅(WYSIWYG) 에디터이다.

WYSIWYG이란 What You See Is What You Get의 약자로, 사용자가 보이는대로 데이터를 얻는다는 뜻이다.

즉, Word나 아래한글 처럼 글과 이미지를 입력한 그대로 볼 수 있다는 말이다.

 

 

 

CKEditor 사용하는 법

 

1. 먼저 CKEditor 를 다운받아야 한다.

 

CKEditor 다운 사이트

CKEditor 4 | Visual Text Editor for HTML

 

Download 버튼을 클릭한다.

 

 

마음에 드는 패키지를 선택하여 Download한다.(필자는 Standard Package를 선택함)

 

 

2. 압축을 풀고 CodeIgniter 폴더 안에다 압축풀은 CKEditor을 넣는다.

 

 

3. CKEditor을 사용할 곳에 js 파일을 로드하고, CKEditor을 화면에 가져오는 코드를 입력한다.

<script src="/my/lib/ckeditor/ckeditor.js"></script>
<script>
    CKEDITOR.replace('바꿀 필드 name');
</script>

replace()함수의 매개변수로 CKEditor로 변경할 태그의 name을 적어줘야한다.

 

 

결과

 

하지만 CKEditor에는 기본 값으로 파일을 업로드 하는 기능이 없다.

그래서 파일을 업로드하는 기능 로드해야한다.

<script>
  CKEDITOR.replace( '필드이름', {
      filebrowserUploadUrl: '/controller명/함수명'
  });
</script>

filebrowserUploadUrl : 사용자가 업로드한 파일을 어떤 php 파일로 넘길 것인가 정하는 코드

 

그리고 controller에 upload하는 함수로 가서 밑줄 친 부분을 upload라고 바꿔줘야한다.

왜냐하면 내부적으로 CKEditor가 업로드하는 파일의 필드 name이 upload이기 때문이다.

그리고, 아래와 코드를 작성한다.

if($this->upload->do_upload("upload")) { // 업로드에 성공하면
    $upload_file = $this->upload->data();
    $file_name = $upload_file['file_name'];
    $file_location = "/my/img/".$file_name;
                
    echo '{"filename" : "'.$file_name.'", "uploaded" : 1, "url":"'.$file_location.'"}';
}
else { // 업로드에 실패하면
    echo '{"uploaded": 0, "error": {"message": "파일 업로드에 실패했습니다.'.$this->upload->display_errors('','').'"}}';
}

 

 

 

 

 

결과

없던 업로드 탭이 생겼다.

 

 

파일을 업로드하면 이미지 정보가 뜨고 글에 저장된다.

 

jpg, png, gif가 아닌 파일을 업로드하려고 하면

다음과 같이 경고창이 나오고 업로드 되지 않는다.

 

 

 

 

 

 

 

출처 : 'CodeIgniter - 생활코딩' 변형 및 요약