ASP .NET MVC에서 FCKEditor를 사용해보자.

게시판 작업을 하나 할 것이 있어서.. 기존의 TextArea를 사용하는 것보다 좀 더 나은 방법을 사용하고 싶은 생각을 가지고 있던 차에 집에서 끄적대다가 발견. 

1. FCKEditor 설치

FCKEditor의 공식 홈페이지에 가서 다운 받으면 된다. zip파일로 되어있는 친절한 상태. ^^

http://www.fckeditor.net/download 

ASP .NET MVC 모델로 Application을 작성하고, 자신이 생각하면 좋은 위치로 카피.

(여기서는 Scripts/fckeditor/ 폴더로 지정.)

설치가 다 되면 (설치위치)/_samples/default.html 로 들어가면 Sample web page가 다음과 같이 나오면 모든 설치는 완료. 

2. ASP .NET MVC에서 FCKeditor의 사용

먼저 간단히 Editor를 표시해보기 위해서 다양한 방법들이 존재하는데, 기본적으로 ASP .NET MVC는 Page의 Fire & Forget 형태이기 때문에 javascript를 이용한 방법이 가장 좋다. (asp, jsp 등의 다양한 방법들이 있지만, MVC에서 사용하기에는 안좋아 보인다.)

1) FCKeditor의 javascript를 추가한다. 

<script type="text/javascript" src="fckeditor/fckeditor.js"></script>

2) FCKeditor의 인스턴스를 생성한다. 

<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "/fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>

3) textarea를 넣어주고, FCKeditor로 만들어준다. 

<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>


3. FCKeditor의 값 얻어오기
MVC에서 주로 사용되는 Form을 이용한 POST 방식으로 값을 얻어오는 것이 안되기 때문에 javascript를 이용해서 값을 얻어와야지 된다. POST를 이용해서 FormCollection을 이용하면 값이 넘어오지 않고 Action이 실행되지도 않는다. 

<script type = "text/javascript" language = "javascript">"
    var fckValue = FCKeditorAPI.GetInstance('name').GetHTML();
</script>





주로 사용되는 것이 FCKeditor의 Instance를 생성하고, 그 값을 얻어오는 반복작업을 줄이기 위해서 HtmlHelper class를 작성.  

   public static class FckEditorHelper
    {
        public static string FckTextBoxBase = "../../Scripts/fckeditor/";
        public static string FckTextBox(this HtmlHelper u, string name)
        {
            return u.FckTextBox(name, null);
        }


        public static string FckTextBox(this HtmlHelper u, string name, object value)
        {
            return u.FckTextBox(name, value.ToString());
        }


        public static string FckTextBox(this HtmlHelper u, string name, string value)
        {
            StringBuilder sb = new StringBuilder();
            sb.AppendFormat(
                "<textarea name=\"{0}\" id=\"{0}\" rows=\"50\" cols=\"80\" style=\"width:100%; height: 600px\">{1}</textarea>",
                name, value);
            sb.Append("<script type=\"text/javascript\" language=\"javascript\">");
            sb.AppendFormat("var oFCKeditor = new FCKeditor('{0}');", name);
            sb.AppendFormat("oFCKeditor.BasePath    = '{0}';", FckTextBoxBase);
            sb.Append("oFCKeditor.Height=400;");
            sb.Append("oFCKeditor.ReplaceTextarea();");
            sb.Append("</script>");
            return sb.ToString();
        }


        public static string PrepareFckTextBox(this HtmlHelper u, string name)
        {
            StringBuilder sb = new StringBuilder("<script type = \"text/javascript\" language = \"javascript\">");
            sb.AppendFormat("var fckValue = FCKeditorAPI.GetInstance('{0}').GetHTML();", name);
            sb.Append("</script>");
            
            return sb.ToString();
        }
    }


사용법은 다음과 같이 사용해주면 된다. 

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <%=Html.FckTextBox("fckTextbox")%>
</asp:Content>





결과는 다음과 같다.