이 글은 구글링하다가 찾은 블로그포스팅에서 (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 으로 생성하고
상단에 스크립트를 적용하시고
본문이 들어가는 공간에 아래를 넣어주시면 됩니다.
이렇게 넣어주시고 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;
}
- 마지막 스크립트 소스를 수정해준다.
여기까지 하시면 이미지업로드 기능이 생성이 됩니다.
확인해보세요. 여기서 이미지업로드 기능이란 웹에디터 본문에 이미지 삽입시키는
기능입니다. 일단 글쓰기시 파일업로드 기능도 가능할 것 같은데
좀더 찾아보면 되지 않을까 합니다. 이 기능은 다음 기회에 포스팅 해볼께요.
6. 웹에디터의 세부 기능들을 스크립트로 설정이 가능합니다.
이렇게 하시면 끝납니다.
어떠세요? 아직 저도 초보라서 쉽게 설명을 못드렸네여.
좀더 쉬운 방법이 있으면 다시 포스팅하겠습니다.









349853
40
264

















댓글을 달아 주세요