TIP게시판

제목 csrf 설정 시 CKEditor 이미지 업로드
글쓴이 예나아범 작성시각 2014/11/13 21:06:54
댓글 : 2 추천 : 0 스크랩 : 1 조회수 : 21151   RSS
csrf TRUE설정을 하고 CKEditor에 이미지 업로드가 안되서 여러 게시물을 찾아 봤지만, ajax 관련된 사항만 많고, 정작 필요한 CKEditor 설정 부분은 없어서 구글링 끝에 소스 하나를 발견해서 한번 올려봅니다.

먼저 제가 CKEditor 설정한 부분부터 보여드리면,

view파일
  <textarea name="contents" id="editor1" rows="50" cols="90"></textarea>
  
  <script>
    // Replace the <textarea id="editor1"> with a CKEditor
    // instance, using default configuration.
    CKEDITOR.replace( 'editor1',{
  filebrowserUploadUrl: '파일업로드를 처리할 컨트롤러명/upload_receive_from_ck'
 });
  </script>


controller 파일
public function upload_receive_from_ck() 
 {  
  $config['upload_path'] = '이미지파일 저장 경로';
  $config['allowed_types'] = 'gif|jpg|png';
  $config['max_size'] = '1024';
  $config['max_width']  = '1024';
  $config['max_height']  = '768';
  $config['encrypt_name'] = TRUE;

  $this->load->library('upload', $config);

  if( ! $this->upload->do_upload("upload"))
  {
   $this->load->helper('alert');
   $error = $this->upload->display_errors('','');
   alert_only($error);
  }
  else
  {
   $CKEditorFuncNum = $this->input->get('CKEditorFuncNum');

   $data = $this->upload->data();
   $filename = $data['file_name'];

   $url = '이미지파일 저장경로'.$filename;

   echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction('".$CKEditorFuncNum."', '".$url."', '전송에 성공 했습니다')</script>";
  }
 }
이런식으로 CKEditor를 붙였습니다. 이렇게 하면 csrf를 False로 설정했을때, 정상적으로 이미지가 업로드 되었구요. 그럼 추가로 작업한 소스는 아래와 같습니다.

view 파일 상단
<script> 
  //<!CDATA[
  $(document).ready(function(){  
   CKEDITOR.on('dialogDefinition', function(ev) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    if(dialogName == 'image') {
     var uploadTab = dialogDefinition.getContents('Upload');

     for (var i =0; i < uploadTab.elements.length; i++)
     {
      var el = uploadTab.elements[i];
      if(el.type != 'fileButton') {
       continue;
      }

      var onClick = el.onClick;

      el.onClick = function(evt){
       var dialog = this.getDialog();
       var fb = dialog.getContentElement(this['for'][0], this['for'][1]);
       var action = fb.getAction();
       var editor = dialog.getParentEditor();
       editor._.filebrowserSe = this;

       $(fb.getInputElement().getParent().$).append('<input type="hidden" name="<?= $this->security->get_csrf_token_name() ?>" value="<?= $this->security->get_csrf_hash() ?>" />');

       if(onClick && onClick.call(evt.sender, evt) === false) {
        return false;
       }
       return true;
      };
     }
    }
   }); 
  }); 
  //}}>
</script>

포럼 내 여러 글들을 참고해서 주소뒤에 ?csrf_token 이런식으로도 해보고, CKEditor의 업로드 메뉴를 재설정해서 Form을 아예 만들어 전송도 해보았는데 위의 방법이 가장 깔끔한거 같습니다. 이미지 첨부 시 서버전송 버튼을 클릭했을 경우 input 태그를 만들어서 POST 전송하는 방식 같은데... 일단 제가 고수가 못되서 사실 소스 전부를 이해하지는 못하겠구요 ㅠㅠ

많은 분들이 이곳에도 저와 비슷한 고민으로 질문을 하신거 같은데, 이게 도움이 되었으면 좋겠습니다. 
 
 다음글 텔레그램 단방향 메세지 송출 팁. (7)
 이전글 CSS 스타일 게시물 글자 자르기 (3)

댓글

한대승(불의회상) / 2014/11/14 08:33:47 / 추천 0
좋은 정보 감사 합니다.
오교 / 2016/12/06 21:05:30 / 추천 0
감사합니다 . 많은 도움 되었어요