KindEditor使用初步

KindEditor是一套開源的HTML可視化編輯器，非常適合在CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用，目前在國內已經成為最受歡迎的編輯器之一。目前最新版本為4.1.9，詳見http://www.kindsoft.net/。

基本使用步驟：

1、下載后解壓縮，把js文件以及lang、plugins、themes文件夾拷貝到自己的網站目錄下，如拷貝到網站的editor目錄下。

2、為了實現文件上傳，在網站中新建handler目錄，放置file_manager_json.ashx及upload_json.ashx（這2個文件在KindEditor解壓縮后的asp.net文件夾下）。

3、為網站引用LitJSON.dll，這個文件在KindEditor解壓縮后的asp.net\bin文件夾下。

4、在網站中新建upload目錄，用來接收上傳的文件。

4、修改file_manager_json.ashx，只要改下面的2行，即把文件接收路徑改成自己的upload目錄：

        //根目錄路徑，相對路徑
        String rootPath = "../upload/";
       //根目錄URL，可以指定絕對路徑，比如 http://www.yoursite.com/attached/
        String rootUrl = aspxUrl + "../upload/"; 

5、同理，修改upload_json.ashx，只要改下面的2行，即把文件接收路徑改成自己的upload目錄：

        //文件保存目錄路徑
        String savePath = "../upload/";

       //文件保存目錄URL
        String saveUrl = aspxUrl + "../upload/";

6、修改web.config,添加requestValidationMode="2.0"，即

    <system.web>
       <compilation debug="true" targetFramework="4.0"/>
      <httpRuntime maxRequestLength="204800" executionTimeout="3600" requestValidationMode="2.0"/>
    </system.web>

  同時，在要使用KinderEditor的aspx頁面上添加ValidateRequest="false"，即

<%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeFile="UseKindEditor.aspx.cs" Inherits="UseKindEditor" %>

7、在頁面上添加代碼：

    <script charset="utf-8" src="editor/kindeditor.js"></script>
    <script charset="utf-8" src="editor/lang/zh_CN.js"></script>
    <script>
        KindEditor.ready(function (K) {
            K.create('#editor_id', {
                uploadJson: 'handler/upload_json.ashx',
                fileManagerJson: 'handler/file_manager_json.ashx',
                allowFileManager: true
            });
        });
    </script>

    <asp:TextBox ID="editor_id" TextMode="MultiLine"  runat="server" Height="338px" 
            Width="776px"></asp:TextBox>

     K.create語句中的#editor_id'為文本框控件的ID，要對應好。handler目錄為第2步中新建的，用來放置file_manager_json.ashx及upload_json.ashx。

8、添加保存按鈕的事件處理代碼：

             //獲取編輯器中的內容

       string content = editor_id.Text;

       string sql = "insert into news(content) values('" + content + "')";
       //插入到數據庫中
       AccessDAL.OleDbHelper.ExecuteNonQuery(sql);

       string sql2 = "select id from news order by id desc";

       int id = (int)AccessDAL.OleDbHelper.ExecuteScalar(sql2);
 
       Response.Redirect("ShowNews.aspx?id=" + id);//顯示剛才錄入的內容
9、如果要配置上傳文件的大小，需修改upload_json.ashx中的int maxSize = 1000000;此處是以Byte作為單位的；另外，要修改web.config,配置asp.net本身允許的上傳文件的大小，如
    <system.web>
       
      <compilation debug="true" targetFramework="4.0"/>
  
       <httpRuntime maxRequestLength="204800" executionTimeout="3600" requestValidationMode="2.0"/>
  
   </system.web>
  此處是以KB作為單位的。

完整代碼下載