[스크랩] 프로젝트에 CKEditor, CKFinder 연동 방법

출처 : http://blog.naver.com/csaiur?Redirect=Log&logNo=10083788708

  

 

 

CKEditor™ 는 웹에디터의 대명사인 FCKeditor 2.x의 후속버전으로 3.x로 버전업하면서

기본 코어자체를 바꾼것 때문인지 CKEditor로 이름이 바뀌었다.

 

웹표준과 크로스브라우징, 웹접근성까지 갖추고 다양한 플러그인으로 무장하여 재 탄생된 CKEditor는

막강한 기능과 편리한 설치 및 사용성 때문에 좋은 평가를 받고 있다.

 

기본적으로 PHP에 설치하기 쉽도록 되어 있어서 PHP에 설치하는 방법은 많이 돌아다니는데,

닷넷웹어플리케이션이나 자바웹어플리케이션에 설치하는 방법은 아직까지는 찾기가 어려워 직접 설치하면서 설치 방법을 정리한다.

 

CKEditor는 기존 FCKeditor에서와는 다르게 엔진 자체에 첨부파일업로드 기능을 지원하지 않는다.

때문에 설치는 어떤 웹환경이건 순수 자바스크립트만으로 동일하게 설치가 가능하다.

 

이미지나 기타 파일들의 업로드 기능을 갖추기 위해서는 CKFinder™ 를 같이 설치하여 연동해 주면

FCKeditor 처럼 자체 업로드 기능이 활성화 된다.

 

복잡할 것 같지만 생각보다 간단하다.

 

아래 내용을 차근차근 참고해 보길 바란다.

 

 

   

 

 

1. 우선 CKEditor와 CKFinder를 다운로드 한다. (CKFinder는 ASP.NET용으로 받는다)

 

CKEditor 다운로드

 

CKFinder 다운로드

 

 

2. 각각 압축을 풀고 생성된 ckeditor 폴더와 ckfinder 폴더를 웹사이트 프로젝트에 추가한다.

사이트의 최상위 루트 또는 위치시키고자하는 하위 폴더에 옮기면 된다.

 

/wwwroot 가 최상위 루트라고 가정할 경우, 아래처럼 폴더구조를 구성한다.

 

/wwwroot

   └ ckeditor

   └ ckfinder

 

또는

 

/wwwroot

   └ board

      └ ckeditor

      └ ckfinider

 

 

3. 게시판 글쓰기에 ckeditor를 추가한다고 가정하고 두번째 구성으로 예를 들겠다.

   이후 예제 소스는..

       /board/ 폴더 하위에 설치한다고 가정함.

       /data/ 폴더에 업로드 파일을 저장한다고 가정함.

       /board/write.aspx 파일에 결합한다고 가정함.

       <textarea>의 name은 'contents'로 가정함.

 

 

CKEditor를 적용하려는 /board/write.aspx 파일의 소스에서

 

<script type="text/javascript" src="/board/ckeditor/ckeditor.js"></script>

를 추가하고,

 

 

4. 에디터를 사용할 부분에 아래 내용을 추가한다.

(textarea의 id가 'contents'인 서버컨트롤일 경우의 예)

 

<textarea id="contents" runat="server"></textarea>
<script type="text/javascript">

  CKEDITOR.config.width = '99%';
  CKEDITOR.config.height = 300;
  CKEDITOR.replace('<%= contents.ClientID %>');
</script>

 

여기까지 진행하고 write.aspx를 호출하면 ckeditor가 적용된걸 확인할 수 있다.

 

 

5. CKFinder를 추가해야 첨부파일 업로드 기능을 사용할 수 있으므로 아래의 추가 작업을 진행한다.

 

 5-1. /ckfinder/bin/Release/ 폴더에 있는 CKFinder.dll 파일을 프로젝트의 Bin 폴더로 이동시킨다.

 

 5-2. /ckfinder/ 폴더의 /_source/ 폴더와 /bin/ 폴더를 삭제한다.

      (삭제하지 않으면 /Bin/CKFinder.dll 파일과 충돌하는 문제가 생길수 있다)

 

 5-3. 파일이 업로드될 폴더를 생성하고 IUSER_서버명 사용자에 쓰기권한을 부여한다.

      예를 들어 사이트 루트디렉토리 /data 폴더에 첨부파일등을 몰아서 사용중일 경우 아래 처럼 생성하면 된다.

      /wwwroot

         └ data

            └ ckfinder

 

 5-4. /ckfinder/config.ascx 소스에서 오버라이드된 SetConfig() 메서드의 BaseUrl 변수의 값을 위에 생성한 폴더로 지정한다.

      예제는 /data/ckfinder/ 에 사용할것이므로 아래처럼 수정하였다.

      BaseUrl = "/data/ckfinder/";

 

 5-5. /ckfinder/config.ascx 소스에서 CheckAuthentication() 메서드의 return 값을 true로 수정한다.

 

 5-6. write.aspx 소스에서 에디터를 추가했던 자바스크립트 코드에 아래와 같이 코드를 추가한다.

 

<script type="text/javascript">

  CKEDITOR.replace('<%= contents.ClientID %>', {
    toolbar: 'Full',
    uiColor: '#eaebe7',
    filebrowserBrowseUrl: '/board/ckfinder/ckfinder.html',
    filebrowserImageBrowseUrl: '/board/ckfinder/ckfinder.html?type=Images',
    filebrowserFlashBrowseUrl: '/board/ckfinder/ckfinder.html?type=Flash',
    filebrowserUploadUrl: '/board/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
    filebrowserImageUploadUrl: '/board/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
    filebrowserFlashUploadUrl: '/board/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
  });

</script>

 

 5-7. 여기까지 하고나면 CKEditor의 이미지 추가 부분에 자체 업로드가 가능해진다.

 

 

6. CKEditor의 색상과 크기, 툴바 등이 맘에 들지 않는다면 아래 소스를 참고하여 이것저것 수정하면 된다.

 

<script type="text/javascript">

CKEDITOR.config.width = '850px';
CKEDITOR.config.height = '400px';

CKEDITOR.config.toolbar_User =
  [
    ['Source', 'Maximize', 'Preview'],
    ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
    ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'Find', 'Replace'],
    '/',
    ['Undo', 'Redo'],
    ['Font', 'FontSize'],
    ['TextColor', 'BGColor', 'Link'],
    ['Image', 'Table', 'CreateDiv', 'HorizontalRule', 'SpecialChar', 'PageBreak', 'Templates', 'Smiley', '-', 'About']
  ];

 

CKEDITOR.replace('<%= contents.ClientID %>', {
  skin: 'kama', //에디터 스킨 (kama, office2003, v2)
  toolbar: 'User', //사용자 정의 툴바 (기본 :Full, Basic)
  uiColor: '#9ab8f3', //에디터 전체 색상 (#RGB)
  enterMode: '2', //엔터키 태그 1:<p>, 2:<br>, 3:<div>
  shiftEnterMode: '1', //쉬프트+엔터키 태그 1:<p>, 2:<br>, 3:<div>
  //filebrowserBrowseUrl: '/board/ckfinder/ckfinder.html', //'서버보기'를 사용하지 않을 경우 주석처리
  //filebrowserImageBrowseUrl: '/board/ckfinder/ckfinder.html?type=Images', //'서버보기'를 사용하지 않을 경우 주석처리
  //filebrowserFlashBrowseUrl: '/board/ckfinder/ckfinder.html?type=Flash', //'서버보기'를 사용하지 않을 경우 주석처리
  filebrowserUploadUrl: '/board/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
  filebrowserImageUploadUrl: '/board/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
  filebrowserFlashUploadUrl: '/board/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
});

</script>

 

 

7. 내용을 입력했는지 체크하려면 아래와 같이 접근한다.

 

<script type="text/javascript">

  function checkEditorValue() {

    if (CKEDITOR.instances.<%=contents.ClientID%>.getData() == '') {

      window.alert('내용을 입력해 주세요.');

      CKEDITOR.instances.<%= contents.ClientID %>.focus();

    }

  }

</script>

 

 

더 자세한 세팅은 아래 ckeditor documentation 사이트를 참고하길 바란다.

 

CKEditor API문서(영문) : http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

 

 

[출처] ASP.NET 프로젝트에 CKEditor, CKFinder 연동 방법|작성자 Developer