까막군's 주접 블로그

검색 :
RSS 구독 : 글 / 댓글 / 트랙백 / 글+트랙백

[Component] Free Web DHTML Editor - FCKEditor 정리 -2-

2008/01/31 12:31, 글쓴이 까막군
-----------------------------------------
작성 이력
-----------------------------------------
작성자 : 최용수
작성일 : 2008.01.31
비   고 : 최초 작성.
-----------------------------------------

이전 정리 문서에서 Asp.net에서 이미지 업로드까지 설정이 되었다면..
이제부턴 커스터 마이징이다.

1. 언어 설정

팝업정보나 버튼정보에 뜨는 언어를 설정할 수 있다.
이번 문서에서 살펴 보았던 fckconfig.js를 다시 열어본다.

FCKConfig.DefaultLanguage  = 'ko' ;

위와 같이 설정하면 에디터는 fckeditor/editor/lang/ko.js 를 참조하게 된다.

ko.js를 살펴보면 MISS 라는 주석이 붙은 항목이 있는데 ... 간단히 말해 번역 못한 내역이다.
필요하다면 적당히 수정해서 사용하자.


2. 업로드 경로가 꼬인다.

FCKEditor에서 제공하는 빌드된 dll을 이용하면 약간 아리송해지는 경우가 발생하는데
Default 모드로 기본 셋팅되면서 업로드 경로가 서로 꼬이게 된다.
이미지 업로드 다이얼로그에 보면

이미지 정보 | 링크 | 업로드 | 자세히   탭이 생성되어 있다.

업로드는 두군데서 이루어진다.

하나는 이미지 정보 - 서버 보기 버튼을 클릭하면 서버의 [업로드루트]/Image 폴더를 조회하여 보여준다.
하단에 보면 폴더를 생성하는 버튼과 함께 업로드 폼도 존재한다.

다른하나는 당연히 업로드 탭에서 업로드가 가능하다.

문제는 업로드 탭에 기본옵션으로 업로드를 할경우 업로드 루트에 바로 파일이 업로드가 된다.
하지만 서버보기 창에서는 업로드루트/image 폴더에 저장한다. . 적당히 꼬인거다..

이문제는 소스를 직접 수정해야한다.

업로드 방식이 FCKEditor에서는 isQuickUpload 라는 변수로 True/False 방식으로 나뉘어져있다.
이게 좀 골때리는게 True/False 값에 따라 업로드 폴더를 생성을 하느냐 안하느냐가 나뉘는 구조로 되어있다.
사실 잘 보면 isQuickUpload 는 결과 Message Alert 창을 띄우는 방식에만 관여하는 것으로 분석된다.
따라서 적당히 수정을 하면 업로드시 업로드 대상 폴더의 생성과 경로지정을 원하는 대로 할 수 있다.

FileBrowser/Uploader.cs 를 보면 isQuickUpload 파라메타 값을 True로 무조건 설정해 놨다.
이것을 수정하면 Message Alert에 영향을 주므로 호출할때 값을 던져주는 것은 포기하고
super class의 함수안에서의 로직을 변경하도록 한다.

자 경로 지정 방식을 수정해 보자.
FCKEditor .Net 라이브러리 소스중 FileBrowser에서 FileWorkerBase.cs 파일을 연다.
고쳐야 할 곳은 두곳! 모두 경로를 셋팅하는 부분이다.

원본 소스
protected void FileUpload( string resourceType, string currentFolder, bool isQuickUpload )
{
     ....중략...
     // Map the virtual path to the local server path.
    string sServerDir = this.ServerMapFolder(resourceType, currentFolder, isQuickUpload);
     ....중략....
    string sFileUrl = isQuickUpload ? typeConfig.GetQuickUploadPath() : typeConfig.GetFilesPath() ;
     ....중략....
    this.SendFileUploadResponse( iErrorNumber, isQuickUpload, sFileUrl, sFileName );
}

고쳐진 소스

protected void FileUpload( string resourceType, string currentFolder, bool isQuickUpload )
{
     ....중략...
     // Map the virtual path to the local server path.
    string sServerDir = this.ServerMapFolder(resourceType, currentFolder, false);
     ....중략....
     //string sFileUrl = isQuickUpload ? typeConfig.GetQuickUploadPath() : typeConfig.GetFilesPath() ;
    string sFileUrl = typeConfig.GetFilesPath() ;
     ....중략....
    this.SendFileUploadResponse( iErrorNumber, isQuickUpload, sFileUrl, sFileName );
}


첫번째 false로 셋팅한 ServerMapFolder 함수는 업로드 대상 폴더를 생성하고(없으면) 파일을 저장할 경로를 리턴한다.
두번째 sFileUrl 은 파일을 업로드하고 [이미지 정보]탭의 링크 부분으로 넘길 파일Url 을 나타낸다.

두곳을 셋팅하면 원하는 폴더 (/UserFiles/Image) 로 파일이 업로드 되고 링크 값도 올바르게 셋팅된다.


3. 버그??

눈에 띄는 버그가 존재하는데, [링크 삽입/변경] 버튼을 클릭하면 링크를 설정하는 다이얼로그가 뜨는데
업로드 탭에서의 파일 업로드시 [Invalid request.] 란 Alert을 띄우면서 업로드가 되지 않는다.
이것도 수정해보자..

수정해야할 파일은 FileBrowser/Uploader.cs 파일이다.

protected override void OnLoad(EventArgs e)
{
   ...중략...
   string sResourceType = Request.QueryString[ "Type" ];

   if ( sResourceType == null )
   {
        //this.SendFileUploadResponse( 1, true, "", "", "Invalid request." );
      //return;
      //Type이 없을경우 업로드 실패가 아닌 무조건 File 폴더로 이동.
      sResourceType = "File";

   }
   ..중략...
}


이렇게 수정이 되면 타입을 알수없는 형태의 업로드 액션에서 파일은 [업로드루트/File] 폴더로 업로드 된다.

크리에이티브 커먼즈 라이센스
Creative Commons License
2008/01/31 12:31 2008/01/31 12:31

맨 위로

[Component] Free Web DHTML Editor - FCKEditor 정리

2008/01/30 18:37, 글쓴이 까막군
무료 웹 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/download ··· .5.1.zip
ASP.Net 2.0 버전 FCKEditor 바이너리 2,5 (소스포함) - http://sourceforge.net/project/showfile ··· 3D137125

자 다받았으면 깔끔하게 프로젝트를 생성해보자..

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를 생성하였다면 해당 소스에 다음을 추가한다.

<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>

간단히 말하면 FCKEditor 컴포넌트를 로드해서 FCKEditorV2 란 이름으로 사용하것네! 라는것이다.

자 이제 Editor를 생성해보자.. 간단하다. Editor.aspx의 form 테그 안에 다음을 추가한다.

<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server"></FCKeditorV2:FCKeditor>


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/ 다.)

<appSettings>
  <add key="FCKeditor:UserFilesPath" value="~/UserFiles/"></add>
  <add key="FCKeditor:BasePath" value="~/FCKeditor/"></add>
 </appSettings>

BasePath 는 FCKEditor의 코어 파일들이 위치하는 곳을 설정한다. <- 매우 중요하다.
몇가지 키가 더 있지만 더 자세한것은 개인이 알아서!

폴더들을 셋팅했으면 당연히 webroot 아래에 위에서 설정한 경로대로 폴더를 생성해둔다
(당연히 권한은 풀어줘야한다. 파일을 쓰게되니까.. 웹개발 경험이 적으신분들은 IIS 관련 권한 설정에 대해 공부하시길..)

이미지 버튼을 눌러서 업로드를 해보삼.. 다음과 같은 경고가 뜰것이다.


This connector is disabled. Please check the "editor/filemanager/connectors/aspx/config.aspx" file.


위의 메세지는 FCKEditor 바이너리 쪽의 /FileBrowser/Uploader.cs에서 뿌려지는 메세지이다.
Config 설정시 권한 체크 쪽을 타게 되는데 권한이 없어서 저러는 것이다.

자자 config.aspx를 고치러 간다. (경로는 위의 메세지에서 뿌려주니..고고싱 - 바이너리가 아니라 웹프로젝트다.)
Config.aspx를 열어보면

public override void SetConfig()
 {
  // 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 _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
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.EnterMode = 'br' ;   // p | div | br
FCKConfig.ShiftEnterMode = 'br' ; // p | div | br


엔터키만 첫을때.. 그리고 쉬프트누르고 엔터를 쳤을때.. 두가지 모드를 지원한다.

적당하게 설정하자.!!!

....
아 또하나. 이미지나 플래시 파일 삽입시 서버 보기 버튼을 누르면 서버에 등록된 이미지 파일이 리스트로 보여진다.
이때 XML 오류가 발생할 때가 있는데. 이는 기본적인 폴더들이 생성이 안되서 그런것이다.
예를 들면 이미지의 경우 /userFiles/image 폴더를 기본 참조하게 되어있다.
생성해주면 잘되니 참고하자!


------------------------

.....ㅡㅡ; 정리하는건 언제나 빡시다. 리플하나씩 달아주면 감사.ㅡ.ㅜ

 

크리에이티브 커먼즈 라이센스
Creative Commons License
2008/01/30 18:37 2008/01/30 18:37

맨 위로

[C#] [Asp.net ] 다운로드 페이지

2007/06/11 11:40, 글쓴이 까막군

내가 쓰던건 업무관련 소스라서.ㅡ.ㅡ; 어딘가 짱박아놨는데;;
(못찾겠다...서버접속도 막혔다..)

ㅇㅅㅇ;; 암튼 일단 형렬이형에게 급 원조

크리에이티브 커먼즈 라이센스
Creative Commons License
2007/06/11 11:40 2007/06/11 11:40

맨 위로