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作为单位的。 完整代码下载
 
上一篇:What Your Computer Does While You Wait.CPU的等待有多久?


下一篇:【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势