ASP.NET MVC 2配置使用CKEditor编辑器

CKEditor是FCKEditor的后续版本，并且由之前的服务器端控件改成了纯客户端HTML编辑器，与平台无关，这一点个人感觉算是最实质性的进步。关于CKEditor的其他特性，在此不多说了，网上的介绍太多了，在此只说一下其配置使用。

    首先，下载CKEditor压缩包，解压后拷贝到项目的某个目录下。例如：

    接着，在视图（即.aspx文件）上引进CKEditor.js文件，同时在页面上加入一个textarea标签，把class设置为"cdeditor"（我在这里使用的Helper方法，当然还有其他很多种初始化方式，不过我比较喜欢这个简单直接，所以采用这种）。例如：

代码

   
     

    
      
    
      <%
    
      @ Page Language
    
      =
    
      "
    
      C#
    
      "
    
       MasterPageFile
    
      =
    
      "
    
      ~/Views/Shared/Site.Master
    
      "
    
       Inherits
    
      =
    
      "
    
      System.Web.Mvc.ViewPage
    
      "
    
       
    
      %>
    
      


    
      <
    
      asp:Content 
    
      ID
    
      ="Content1"
    
       ContentPlaceHolderID
    
      ="TitleContent"
    
       runat
    
      ="server"
    
      >
    
      
 Home Page

    
      </
    
      asp:Content
    
      >
    
      


    
      <
    
      asp:Content 
    
      ID
    
      ="Content2"
    
       ContentPlaceHolderID
    
      ="MainContent"
    
       runat
    
      ="server"
    
      >
    
      
 
    
      <
    
      script 
    
      src
    
      ="http://www.cnblogs.com/Scripts/ckeditor/ckeditor.js"
    
       type
    
      ="text/javascript"
    
      ></
    
      script
    
      >
    
      

 
    
      <
    
      h2
    
      >
    
      <%
    
      : ViewData[
    
      "
    
      Message
    
      "
    
      ] 
    
      %>
    
      </
    
      h2
    
      >
    
      
 
    
      <
    
      p
    
      >
    
      
 To learn more about ASP.NET MVC visit 
    
      <
    
      a 
    
      href
    
      ="http://asp.net/mvc"
    
       title
    
      ="ASP.NET MVC Website"
    
      >
    
      http://asp.net/mvc
    
      </
    
      a
    
      >
    
      .
 
    
      </
    
      p
    
      >
    
      
 
    
      <%
    
      using (Html.BeginForm())
 { 
    
      %>
    
      
 
    
      <%
    
      :Html.TextArea(
    
      "
    
      Editor1
    
      "
    
      , 
    
      new
    
       { @class 
    
      =
    
       
    
      "
    
      ckeditor
    
      "
    
      , cols 
    
      =
    
       
    
      "
    
      80
    
      "
    
      , rows 
    
      =
    
       
    
      "
    
      10
    
      "
    
       })
    
      %>
    
      
 
    
      <
    
      p
    
      >
    
      
 
    
      <
    
      input 
    
      type
    
      ="submit"
    
       value
    
      ="save"
    
       
    
      />
    
      
 
    
      </
    
      p
    
      >
    
      
 
    
      <%
    
      } 
    
      %>
    
      

    
      </
    
      asp:Content
    
      >
   
     

    当然，你也可以在MasterPager或其他也使用地方引用，但必须属于视图包含的一部分。

 

    然后，你就可以在后台控制器(Controller)的Action上获取CKEditor控件的值了。例如：

  
    

   
     
   
      [HttpPost]
 [ValidateInput(
   
     false
   
     )]
 
   
     public
   
      ActionResult Index(
   
     string
   
      editor1)
 {
 editor1 
   
     =
   
      editor1.Trim();

 
   
     return
   
      View();
 }
  
    

复制代码

    记住，ValidateInput特性必须设置为false，否则提交时会提示存在危险值而报错。

 

    以上配置完成之后，基本上是完成的啦。但是，我使用的是VS2010，.NET4.0的环境，提交的时候马上报错，提示我的表单存在危险值。于是找了一下原因，关键在于配置文件少了一句（具体是什么原因我现在还不是很清楚，希望看到此文的朋友又了解的补上这个空白）。

    在<system.web></system.web>节下面的pages上加上特性validateRequest="false"，并且加上<httpRuntime requestValidationMode="2.0"/>（其实只要在action上面加ValidateInput(false)，pages上的特性validateRequest="false"可以省略，测试通过)。

配置文件如下：

代码

   
     

    
      
    
       
    
      <
    
      pages 
    
      validateRequest
    
      ="false"
    
      >
    
      
 
    
      <
    
      namespaces
    
      >
    
      
 
    
      <
    
      add 
    
      namespace
    
      ="System.Web.Mvc"
    
       
    
      />
    
      
 
    
      <
    
      add 
    
      namespace
    
      ="System.Web.Mvc.Ajax"
    
       
    
      />
    
      
 
    
      <
    
      add 
    
      namespace
    
      ="System.Web.Mvc.Html"
    
       
    
      />
    
      
 
    
      <
    
      add 
    
      namespace
    
      ="System.Web.Routing"
    
       
    
      />
    
      
 
    
      </
    
      namespaces
    
      >
    
      
 
    
      </
    
      pages
    
      >
    
      
 
    
      <
    
      httpRuntime 
    
      requestValidationMode
    
      ="2.0"
    
      />
    
      

   
     

复制代码

 

    到此为止，可以正常使用了。