무료 웹 HTML 에디터를 찾던중 보인 FCKEditor ....
매우 좋다.. 현재로선 대만족.. ASP.Net 용으로 필요했었는데 소스도 공개되어있어서 수정도 나름 할만하다.
간단히 정리하것삼..
-----------------------------------------
작성 이력
-----------------------------------------
작성자 : 최용수
작성일 : 2008.01.30
비 고 : 최초 작성.
-----------------------------------------
퍼가실땐 센스있게 링크정도는 껴주삼
1. 환경
Os : Windows XP pro SP2
Dev Tools : Visual Studio 2005
2. 준비물
홈페이지 : http://www.fckeditor.net/
FCKEditor 2.5.1 (2008년 1월 30일 현재 최신버전) - http://sourceforge.net/project/downloading.php?group_id=75348&filename=FCKeditor_2.5.1.zip
ASP.Net 2.0 버전 FCKEditor 바이너리 2,5 (소스포함) - http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=137125
자 다받았으면 깔끔하게 프로젝트를 생성해보자..
3. 환경 설정
적당히 소스를 건드려 볼것이니 빈솔루션을 하나 만든후
* ASP.Net 2.0 버전 FCKEditor 바이너리 2,5의 프로젝트 파일을 추가
* ASP.Net 웹 프로젝트 추가
다음으로 웹 프로젝트에서 ASP.Net 2.0 버전 FCKEditor 바이너리 2,5 프로젝트를 참조 설정.
이렇게 하면 기본적으로 웹 프로젝트에서 FCKEditor를 참조하게 되므로 적절하게 개발 환경은 셋팅 완료!
4. ASP.Net 으로 적용해보자.
솔루션 구성이 완성되었으면 aspx 파일을 추가하여 Editor를 쓸수 있는 페이지를 만든다.
Editor.aspx를 생성하였다면 해당 소스에 다음을 추가한다.
간단히 말하면 FCKEditor 컴포넌트를 로드해서 FCKEditorV2 란 이름으로 사용하것네! 라는것이다.
자 이제 Editor를 생성해보자.. 간단하다. Editor.aspx의 form 테그 안에 다음을 추가한다.
asp.net을 해보신분은 아실태니 설명은 패스! 쉽게 생각하면 Textarea 같은놈이 생긴것이다.
값은 코드 비하인드에서(Editor.aspx.cs) Request.Form["FCKeditor1"] 또는 this.FCKeditor1.Value 로 받는다.
요기까지 하면 다되엇을까! 그렇지~~ 않습니다~( 1박2일 버전)
ASP.Net 2.0 버전 FCKEditor 바이너리 2,5 프로젝트 파일에는 FCKEditor를 구성하는 실제 파일들이 존재 하지 않다. 말그대로 라이브러리만 제공한다.
자 아까 받아놓았 던 FCKEditor 2.5.1 zip파일을 풀어서 /FCKEditor 폴더에 풀자.
(당연히 FCKEditor 폴더는 WebRoot 아래다!)
자 이제 Editor.aspx를 브라우저에서 실행하면 찬란한 에디터가 보일것이다.
5. 이미지 업로드 셋팅
여타 다른 Web Editor들의 짜증나는 점이 로컬 컴퓨터의 Image를 링크걸어서 실제 서비스로 등록할때는 링크가 깨져서 아름다운 엑박으로 표현되는 것이다.
FCKEditor에서는 이미지 업로드를 통해 실제 글 등록시 이미지 링크 깨짐을 방지한다.
자세히 셋팅해보자..
web.config 를 수정해서 기본적인 업로드 폴더를 지정한다. (기본은 /userFiles/ 다.)
<add key="FCKeditor:UserFilesPath" value="~/UserFiles/"></add>
<add key="FCKeditor:BasePath" value="~/FCKeditor/"></add>
</appSettings>
BasePath 는 FCKEditor의 코어 파일들이 위치하는 곳을 설정한다. <- 매우 중요하다.
몇가지 키가 더 있지만 더 자세한것은 개인이 알아서!
폴더들을 셋팅했으면 당연히 webroot 아래에 위에서 설정한 경로대로 폴더를 생성해둔다
(당연히 권한은 풀어줘야한다. 파일을 쓰게되니까.. 웹개발 경험이 적으신분들은 IIS 관련 권한 설정에 대해 공부하시길..)
이미지 버튼을 눌러서 업로드를 해보삼.. 다음과 같은 경고가 뜰것이다.
위의 메세지는 FCKEditor 바이너리 쪽의 /FileBrowser/Uploader.cs에서 뿌려지는 메세지이다.
Config 설정시 권한 체크 쪽을 타게 되는데 권한이 없어서 저러는 것이다.
자자 config.aspx를 고치러 간다. (경로는 위의 메세지에서 뿌려주니..고고싱 - 바이너리가 아니라 웹프로젝트다.)
Config.aspx를 열어보면
{
// SECURITY: You must explicitly enable this "connector". (Set it to "true").
Enabled = CheckAuthentication();
,.,,,
... 중략
친절하게도 권한 설정 메소드가 있었다.
CheckAuthentication() 메소드를 보면.. 두둥.. return false; !!!!!!!!!!!!!
솔직히 좀 true로 해두면 얼마나 좋은가.. 삽질도 안하고..
인증 관련 로직을 에디터에서 관리하는 웹사이트는 없으니..(..내가 알기론..) 그냥 return true; 로 설정한다.
aspx 관련 셋팅은 끝났다. .....이제 FCKEditor 를 컨트롤 하는 Javascript 셋팅으로..
웹루트/FCKEditor/fckconfig.js 를 연다.
설정에 관한 모든 변수들이 셋팅 되어있으니 차근차근 보기 바란다. (시간 날때!)
업로드에 필요한 변수는...
var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
aspx 모듈을 사용하니 당연히 aspx 로 설정한다. (fckeditor는 거의 모든 웹 스크립트 언어를 지원한다.)
즈아~~ 이제 끝!! 실행 해보면 된다!!!! ( 안되면 낭패... 하지만 본인이 직접 해봤으니 되는건 눈으로 다봤다.)
궁금한건 http://www.fckeditor.net/ 의 Forum에 가면 (삽질의 흔적인)자료가 많으니 참고하는게 좋겟다.
6. 기타 세팅
웹 에디터에서 짜증나는 점 하나 더 추가하자면 Enter 키를 <p>테그로 인식한다는것이다.
Microsoft DHTML 관련 자료를 찾아보면 <p> 를 <div>로 대체하는 모드도 있지만..
정작 중요한건.. 우리에겐 <br> 테그로의 전환이다.
fckeditor는 그에대한 설정을 할 수 있게 해놨따. (웹루트/FCKEditor/fckconfig.js를 다시 열자)
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br
엔터키만 첫을때.. 그리고 쉬프트누르고 엔터를 쳤을때.. 두가지 모드를 지원한다.
적당하게 설정하자.!!!
....
아 또하나. 이미지나 플래시 파일 삽입시 서버 보기 버튼을 누르면 서버에 등록된 이미지 파일이 리스트로 보여진다.
이때 XML 오류가 발생할 때가 있는데. 이는 기본적인 폴더들이 생성이 안되서 그런것이다.
예를 들면 이미지의 경우 /userFiles/image 폴더를 기본 참조하게 되어있다.
생성해주면 잘되니 참고하자!
'.net' 카테고리의 다른 글
| Server.UrlEncode와 HttpUtility.UrlEncode의 차이점이 관해 (0) | 2010.02.24 |
|---|---|
| Rolling back Visual Studio 2008 projects to Visual Studio 2005 (1) | 2009.11.20 |
| Excel Reports in ASP.NET 2.0 (1) | 2008.04.18 |
| ADO.NET 2.0 DataSet as a Self-Contained (0) | 2008.04.18 |
| FCK editor No.2 (1) | 2008.04.04 |