MVC環境下fckeditor的使用樣本

最近項目中開始應用MVC架構，也遇到了一些問題，在此逐漸分享一些心得，以作交流。

第一個問題是fckeditor的應用，在網上搜尋過的url有：

《 Integrating FCKeditor in ASP.NET》http://www.codeproject.com/KB/aspnet/fckeditor.aspx

 也有dll添加的方式http://forums.asp.net/t/1312846.aspx

 還有二十四畫生的http://www.cnblogs.com/esshs/archive/2008/12/03/1346326.html#1548106

比較之後決定採用js控制的方式

步驟如下：(本例使用MVC1.0 Release!)

1、在 http://ckeditor.com/下載最新的Fckeditor V2.6（注意不是ckeditor3.0），下載後不含dll，直接整個目錄解壓到Content目錄下

MVC項目目錄結構下：

 2、在HomeController.cs中添加actionResult:

    /// <summary>
        /// Show FCK Editor View Page
        /// </summary>
        public ActionResult Fck()
        {
            //RenderView("Fck");
            ViewData["Title"] = "test Page";
            ViewData["Fck"] = Request.Form["Fck"];
            return View();
        }

 ３、上述代碼內部右鍵“Add View”--View Name預設為"Fck",點擊"Add",則項目中\Views\Home\Fck.aspx檔案自動新增。開啟該檔案，

 在ＭainContent下替換預設內容為：

 <script type="text/javascript" src=" http://www.cnblogs.com/Content/fckeditor/fckeditor.js"></script>
    
    <script type="text/javascript">
        window.onload = function() {
            var oFCKeditor = new FCKeditor('content');
            oFCKeditor.BasePath = " /Content/fckeditor/";
            oFCKeditor.Height = 300;
            oFCKeditor.ReplaceTextarea();
        }

        function InsertContent() {
            var oEditor = FCKeditorAPI.GetInstance('content');
            var sample = document.getElementById("sample").value;
            oEditor.InsertHtml(sample);
        }

        function ShowContent() {
            var oEditor = FCKeditorAPI.GetInstance('content');
            alert(oEditor.GetHTML());
        }

        function ClearContent() {
            var oEditor = FCKeditorAPI.GetInstance('content');
            oEditor.SetHTML("");
        }
    </script>
    
    <div>
        <input id="sample" type="text" /> 
        <input id="cmdInsert" type="button" value="Insert Content" onclick="InsertContent()" />
        &nbsp;
        <input id="cmdClear" type="button" value="Clear Content" onclick="ClearContent()" />
        <br /> <br />
        <textarea id="content" cols="30" rows="10"></textarea>
        <br />
        <input id="cmdShow" type="button" value="Show Content" onclick="ShowContent()" />
    </div>

 
注意，配置好js的路徑。

４、展示fck,在\Views\Shared\Site.Master中添加如下內容：

  <li> <%= Html.ActionLink("FCKDemo", "Fck", "Home")%> </li>

  OK!　預覽下效果吧！