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作为单位的。

完整代码下载