OverTOP의 추억 그리고 다른 세상.

이 글은 구글링하다가 찾은 블로그포스팅에서 (http://blog.naver.com/csaiur/10083788708)
배운대로 연동한 내용입니다.

CKEditor™ 는 FCKeditor 2.x 의 버전업된 웹 에디터입니다.
그동안 FCKeditor 2.x 웹에디터를 asp.net 에서 많이들 사용하고 있죠.

2가지를 모두 적용해봤는데 [CKEditor™] 에디터가 조금은 편하더군요.
다양한 기능을 써보지는 않았지만 기능적으로는 비슷한것 같아요.

그냥 편하신걸로 쓰시면 될것 같아요.

CKEditor™ 를 적용해봅시다.

1. 다운로드 한다.
- CKEditor™ 다운로드
- CKFinder™ 다운로드

2. 각각 압축을 풀면 아래와 같이 파일들이 존재합니다.

이렇게 보일겁니다.
여기서 ckeditor 의 파일들중에서 asp.php, html 은 깔끔하게 지워주세요.
쓰이지 않는 파일들은 가지고 갈 필요가 없겠죠.

현재 작업중은 프로젝트에 2개의 폴더를 추가하시면 됩니다.
wwwroot/ckeditor
wwwroot/ckfinder
이렇게 넣어도 되지만 폴더가 지져분해 보여서 저는
wwwroot/include/ckeditor
wwwroot/include/ckfinder
이렇게 구성했습니다.

프로젝트에 추가하는 법을 모르시면 Solution Explorer 에서
include 폴더를 한개 생성한 후에 2개의 폴더를 각각 드래그해서
넣어주시면 됩니다. 참 쉬죠잉~~

일단은 wwwroot/include/ckeditor 폴더만 먼저 복사해주세요.

3. 웹폼에 적용해 봅시다.
쓰기 폼 파일인 write.aspx 으로 생성하고
상단에 스크립트를 적용하시고
본문이 들어가는 공간에 아래를 넣어주시면 됩니다.

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

 < textarea id="contents" runat="server">

<SCRIPT type=text/javascript>
  CKEDITOR.config.width = '99%';
  CKEDITOR.config.height = 300;
  CKEDITOR.replace('<%= contents.ClientID %>');
</SCRIPT>

이렇게 넣어주시고 write.aspx 를 실행하면 웹에디터가 적용됩니다.
확인 하셨나여 ??
짠~~ 하고 잘 뜨죠 ??

4. ckfinder 폴더를 웹프로젝트에 추가해주세요 (드래그 하세요. ㅋㅋ)
5. 업로드 기능을 사용할 수 있도록 설정해줍니다.
- ckfinder\bin\Release폴더에 있는 [ CKFinder.dll ] 파일을 웹프로젝트의
bin 폴더에 추가해준다.
단, 작업중인 프로젝트사 웹사이트가 아니고 프로젝트로 구성했을시에는
bin 폴더가 없습니다. 그래서 이넘도 드래그해서 가져와야 됩니다. ㅠㅠ
다른 방법은 아직 몰라요. 초보라서
- ckfinder\_source , ckfinder\bin 폴더는 삭제해준다.
방금 bin에 추가한 dll 과 충돌되는 현상이 종종 있다고 하네여.

- 파일업로드할 폴더를 생성한다.
   \include\data\ckfinder\ 폴더를 생성해준다.
   혹 업로드시 권한 문제가 있을 경우 IIS설정에서 해당 폴더에 쓰기권한을 주시면됩니다.

- ckfinder/config.aspx 설정 변경하기
public override void SetConfig(){
   ....
// The base URL used to reach files in CKFinder through the browser.
BaseUrl = "/include/data/ckfinder/";
   ....
}

public override bool CheckAuthentication()
{
   return true;
}

   - 마지막 스크립트 소스를 수정해준다.

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

여기까지 하시면 이미지업로드 기능이 생성이 됩니다.
확인해보세요. 여기서 이미지업로드 기능이란 웹에디터 본문에 이미지 삽입시키는
기능입니다. 일단 글쓰기시 파일업로드 기능도 가능할 것 같은데
좀더 찾아보면 되지 않을까 합니다. 이 기능은 다음 기회에 포스팅 해볼께요.

6. 웹에디터의 세부 기능들을 스크립트로 설정이 가능합니다.

<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: '1', //엔터키 태그 1:<p>, 2:
, 3:<div>
                                        shiftEnterMode: '1', //쉬프트+엔터키 태그 1:<p>, 2:
, 3:<div>
                                        //filebrowserBrowseUrl: '/include/ckfinder/ckfinder.html', //'서버보기'를 사용하지 않을 경우 주석처리
                                        //filebrowserImageBrowseUrl: '/include/ckfinder/ckfinder.html?type=Images', //'서버보기'를 사용하지 않을 경우 주석처리
                                        //filebrowserFlashBrowseUrl: '/include/ckfinder/ckfinder.html?type=Flash', //'서버보기'를 사용하지 않을 경우 주석처리
                                        filebrowserUploadUrl: '/include/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
                                        filebrowserImageUploadUrl: '/include/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
                                        filebrowserFlashUploadUrl: '/include/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
                                    });

                                </SCRIPT>

이렇게 하시면 끝납니다.
어떠세요? 아직 저도 초보라서 쉽게 설명을 못드렸네여.
좀더 쉬운 방법이 있으면 다시 포스팅하겠습니다.