Sunny's Dev

하루동안 삽질아닌 삽질을 한 결과를 정리해 두고자함.

ASP.NET MVC 환경에서 FCKeditor를 사용하기 위해서는 몇가지 간단한 설정이 필요하다.

이번에 다시한번 FCKeditor의 강력함을 느낄 수 있었다....


* PreRequisite
1. ASP.NET MVC Beta
2. jquery-1.2.6.js
3. FCKeditor
    - 코어 모듈
    - 닷넷용 모듈


여기선 두가지 기능을 사용해 볼것이다.

• FCKeditor를 View 페이지에 삽입하는 방법
• FCKeditor를 사용해서 이미지 업로드 하는 방법

1. FCKeditor를 View 페이지에 삽입하는 방법

우선 MVC 어플리케이션을 생성한 후에, 다운 받은 FCKeditor 코어모듈의 fckeditor 폴더를 드래그앤드롭으로 비주얼스튜디오의 솔루션 탐색기에서 Scripts 폴더 하위에 복사한다.

FCKeditor의 메뉴 툴바에는 매우 많은 기능들을 가지고 있으며, 때에 따라서는 이 모든 기능이 필요없을 때도 있을 것이다. 이럴땐 내가 사용하고자 하는 기능만 선별해서 툴바에 보이게 할 수 있다.

fckeditor 폴더 하위에 있는 fckconfig.js 파일을 열어서 맨 하단에 아래와 같이 추가한다.



다음은 Site.Master 파일에 jQuery 파일과 FCKeditor용 자바스크립트 파일을 참조 추가한다.



이제 FCKeditor를 사용할 View 페이지로 와서 상단에 자바 스크립트를 추가하고 FCKeditor를 적용할 Textarea 엘리먼트를 지정한다.
FCKeditor를 추가하는 방법은 이외에도 두 가지 더 있지만, 개인적으로는 이 방법이 가장 명료한 것 같다.



여기까지 이상이 없으면 어플리케이션을 실행하여 다음과 같이 성공적으로 에디터가 보여질것이다.

2. FCKeditor를 사용해서 이미지 업로드 하는 방법

이번엔 이미지 업로드 기능을 사용해 보자.

이미지를 업로드 하기 위해서는 다시 fckconfig.js 파일로 와서 아래의 부분을 찾아서 'php' 로 지정되어 있는 부분을 아래와 같이 'aspx'로 변경한다.

그리고 처음에 다운받은 닷넷용  FCKeditor 모듈을 참조 추가한다.
dll 이름은 'FredCK.FCKeditorV2.dll' 이다.

다음으로는 Scripts/fckeditor/editor/filemanager/conectors/aspx 폴더에 있는 config.ascx 파일에서 Enabled 를 true로 변경한다.




업로드된 파일 폴더에 대한 접근 권한을 제한하려면 CheckAuthentication() 메소드를 구현하면 된다.
그리고 업로드된 파일들은 웹어플리케이션 루트 폴더의 userfiles 폴더에 자동 저장되며 폴더는 변경할 수 있다.
(ASP.NET 로컬 웹서버를 사용하지않고 실제 IIS에 포팅하는 경우는 위의 폴더 경로를 UserFilesPath = "~/userfiles/";와 같이 변경해야 한다.)

이것으로 모든 설정은 끝났으며, 어플리케이션을 실행시켜서 FCKeditor 메뉴 툴바에서 이미지 삽입 버튼을 누르면 이미지 업로드, 업로드된 이미지 브라우징, 파일 업로드 등의 기능을 문제없이 사용할 수 있다.




부디 삽질없이 한번에 잘 성공하길~~~~

출처 : http://funnygangstar.tistory.com/entry/ASPNET-MVC-어플리케이션에서-FCKeditor-사용하기-메뉴툴바-설정-이미지-업로드

출 처 : http://maestroys.tistory.com/entry/fckeditor%EC%82%AC%EC%9A%A9%EB%B2%95ASP
1. 우선 fckeditor을 현재 사이트에다가 올린다.(대부분 root경로에 올림)
2. /fckeditor/fckeditor.asp파일을 연다.
- 손을 댈 부분은 여기밖에 없다...(다른부분도 있겠지만 해보지 않았음...^^;)
 Private Sub Class_Initialize()
  sBasePath  = "/fckeditor/"
  sWidth   = "100%"          'width값을 조정한다.
  sHeight   = "200"            'height값을 조정한다.
  sToolbarSet  = "Default"
  sValue   = ""                 '기본값을 지정한다.

3. /fckeditor/fckconfig.js 파일을 연다.
- 상단에 있는 탭들을 정리할수 있다.에디터 상단 탭..(레프트정렬/라이트 정렬등등)을 필요위주로 정리할필요가 있다..(로딩이 굉장히 느리다..이 에디터..최대의 단점이라고 할수있음).
FCKConfig.ToolbarSets["Default"] = [
 ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
 ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
 ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
 ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
 '/',
 ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
 ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
 ['Link','Unlink','Anchor'],
 ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
 '/',
 ['Style','FontFormat','FontName','FontSize'],
 ['TextColor','BGColor'],
 ['FitWindow','ShowBlocks','-','About']  // No comma for the last row.
] ;

- 굉장히 중요한 부분이다..에디터에서 엔터키를 치면 <p>로 되는데 이걸 <br>로 해주는 기능이다. 이것때문에 굉장히 애먹었던적이 있다.
FCKConfig.EnterMode = 'p' ;   // p | div | br

- 랭기지 부분을 asp로 바꿔준다.
var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py

4. fckeditor/editor/filemnager/connectors/asp/config.asp파일을 연다.
-  이부분을 true로 바꿔준다..이것때문에 파일 업로드 안되서 한참 고생했다.
Dim ConfigIsEnabled
ConfigIsEnabled = False
- 파일 업로드 경로를 적어준다.^^
Dim ConfigUserFilesPath
ConfigUserFilesPath = "/userfiles/"


*//2008/01/11추가
/////////////////////////////////////////////////////////////////////////////////////////////////
//입력체크를 하고 싶을 경우
if(FCKeditorAPI.GetInstance('textarea이름').GetXHTML(true) == ""){
   alert("내용을 입력해주세요.");
   FCKeditorAPI.GetInstance('textarea이름').Focus();
   return false;
  }
/////////////////////////////////////////////////////////////////////////////////////////////////

[처음 FCKEditor를 적용하면서 정리를 해봤는데..많은 부분이 부족한듯 --;; 시간나면 다시한번 정리를 하겠습니다.]

- FCKEditor 이미지 업로드 및 삽입방법

- 기존내용 수정 및 추가

FCKEditor압축파일을 다운받은후 푼다.

sample파일 : /FCKeditor/_sample  폴더 밑 sample파일
test파일 : /FCKeditor/_testcases 폴더 및 html 파일
editor페이지:  /FCKeditor/editor/fckeditor.html 과 fckeditor.original.html파일

1. fckeditor폴더를 서비스 root폴더에 푼다.

2. 에디터가 들어가는 페이지에 인클루드한다.
 

3. 편집기가 들어가는 위치에 다음의 코드를 삽입한다.
<%
 Dim oFCKeditor
 Set oFCKeditor = New FCKeditor
 oFCKeditor.BasePath = "/FCKeditor/"
 oFCKeditor.Create "FCKeditor1"
%>

◆ Enter키 사용시  fckconfig.js 중에 FCKConfig.UseBROnCarriageReturn = true ; 으로 변경

태그에서
태그 적용방법

◆ 설정사항
 설정파일 - fckeditor.asp
  sBasePath  = "/FCKeditor/"
  sWidth   = "100%" '너비
  sHeight   = "400"  '높이
  sToolbarSet  = "Default" '툴바 스타일
  sValue   = ""

◆ FCKeditor 제공하는 기본 언어/메뉴/스킨 변경
 /FCKeditor/_sample폴더 밑에 sample파일 참조
<%
 Dim sBasePath
 sBasePath = "/FCKeditor/"
 
 Dim oFCKeditor
 Set oFCKeditor = New FCKeditor
 oFCKeditor.BasePath = sBasePath
%>

 1. 언어변경 : sample2.asp 참조
   oFCKeditor.Config("DefaultLanguage")
 2. 메뉴변경 : sample3.asp 참조
   oFCKeditor.ToolbarSet = Request.QueryString("Toolbar")
   value = Default , Basic
 3. 스킨변경 : sample4.asp 참조
   oFCKeditor.Config("SkinPath") = sBasePath + "editor/skins/" & Request.QueryString("Skin") + "/"
   value = default.office2003,silver

◆ 도구모음 중 불필요한 도구 제거하기
 /FCKeditor/fckconfig.js 파일에서
 FCKConfig.ToolbarSets["Default"] 항목의 값중에 필요없는 도구를 제거한다.
 

◆ 아이콘 경로가 현재위치(/FCKeditor)부터 적용되어 있는걸 URL을 포함시키는 방법.
 /FCKeditor/fckconfig.js 파일에서
 [아이콘 경로]
 FCKConfig.site_root_url = "url입력";
 FCKConfig.SmileyPath = FCKConfig.site_root_url + FCKConfig.BasePath + 'images/smiley/msn/' ;
 
 이미지 및 플래시 경로 변경도 비슷할듯 테스트 해봐야...

◆ FCKeditor 값 전송시 처리방법
 replace함수를 써서 " -> '  으로 변환한다.
 content = replace(Request.Form("FCKeditor1"),"""","'")
 
 ps) FCKeditor는 입력값이 html변환시 내용중 "은 "로 변환되어 전송받은 페이지에서 정상적으로 보여지나, 입력값중에 태그에 의해 자동생기는 "은 전송받은 페이지에서 그대로 넘겨받아 해당페이지의 태그 속성값과 충돌이 생겨 깨진다. 이를 위해 넘기는 "은 '으로 변환한다.
 
◆ 전송받은 페이지에서 한글깨짐 처리방법
<%@ CodePage='949'  Language="VBScript"%> 삽입