KindEditor简单使用之textarea

KindEditor富文本框的使用:

网上下载KindEditor包:

直接上代码:

KindEditor放在/Script/editor目录下

    <link href="/Scripts/editor/themes/default/default.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/editor/lang/zh_CN.js" type="text/javascript"></script>
    <script charset="utf-8" src="/Scripts/editor/kindeditor.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="/Scripts/YZR/AjaxHelp.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(function () {
             //实例化一个富文本编辑框
             KindEditor.create(
              "textarea", //将当前页面的textarea改造 成富文本编辑框
              {
              resizeType: 1, //表示当前富文本编辑框可以拉伸
              //uploadJson: '/kindeditor/upload_json.ashx',//上传图片的一般处理程序的路径）
              uploadJson: '/editor/upload_json.ashx',
              allowFileManager: true,
              afterBlur: function () { this.sync(); //加上这一句$("#id").val()才能起作用}
          });
         });
     </script>

/Script/YZR/AjaxHelpe.js是对Ajax的简单封装,代码如下:

var AjaxHelp = {
    GetXhr: function () {  //创建异步对象
        var xhr = new XMLHttpRequest();
        return xhr;
    },
    //处理ajax的get请求
    ProcessGet: function (url, callback) {
        this.ProcessAjax("get", url, null, callback);
    },
    ProcessPost: function (url, params, callback) {
        this.ProcessAjax("post", url, params, callback);
    },
    //统一处理的方法
    ProcessAjax: function (method, url, params, callback) {
        //1.0创建异步对象
        var xhr = this.GetXhr();
        if (method == "get") {  //2.0打开链接
            xhr.open("get", url, true); //3.0不使用缓存
            xhr.setRequestHeader("if-modified-since", "0");
        } else { //2.0打开链接
            xhr.open("post", url, true); //3.0将参数放在form data属性中
            xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        }
        //4.0设置回调函数
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //得到从服务器里得到的数据
                var content = JSON.parse(xhr.responseText);//---->转成js对象
                //调用回调函数(执行自己的业务逻辑)
                callback(content);
            }
        }
        //5.0发送请求
        xhr.send(params);
    }
};

HTML代码:

<table class="list">
 <tr>
   <td>标题:</td>
   <td><input type="text" name="txt_Title" id="txt_Title" /></td>
 </tr>
 <tr>
   <td>内容:</td>
   <td>
      <textarea rows="30" id="txt_Content" name="txt_Content" ></textarea>
  </td>
 </tr>
 <tr>
   <td></td>
   <td><input type="button" value="发布" id="publish" /></td>
  </tr>
</table>

至此,富文本框就能起作用了.

如果需要保存<textarea>标签内的格式,那么在<textarea>标签html代码需要一同提交,在这里会出现一个Request.Form或者Request.QueryString检测到敏感数据的问题,

那么解决该问题的方案如下:

<script type="text/javascript">
        $(function () {
            $("#publish").click(function () {
                var content = $("#txt_Content").val();
                var title = $("#txt_Title").val();
                AjaxHelp.ProcessPost("/Publish/PublishNew", "content=" + content + "&title=" + title, function (ajaxObj) {
                    if (ajaxObj.Status == 1) {
                        alert(ajaxObj.Msg);
                        $("#txt_Content").val("");
                        KindEditor.instances[0].html("");//清空
                    }
                    else
                        alert(ajaxObj.Msg);
                });
            });
        })
</script>

首先,在相应的控制器上贴上特性标签:[ValidateInput(false)]

        [ValidateInput(false)]
        public ActionResult PublishNew()
        {
            string title=Request["title"];
            string content=Request["content"];
            if (string.IsNullOrEmpty(title))
            {
                return Json(new { Status = 0, Msg = "标题不能为空" });
            }
            if (string.IsNullOrEmpty(content))
            {
                return Json(new { Status = 0, Msg = "内容不能为空" });
            }
            ConnectedDataBase cdb = WebEnvironment.DefaultDataBase.CreateConnectedDataBase();
            int i=cdb.ExecuteNonQuery("insert into Publish (PTitle,PContent,PublishDate,IsShow) values ('" + title + "','" + content + "',sysdate,1)");
            if(i>0)
            {
                return Json(new { Status = 1, Msg = "发布成功" });
            }
            else
                 return Json(new { Status=0,Msg="出现异常"});
        }

接着在相应的视图页面上的Page指令加上ValidateRequest="false"

 <%@ Page Language="C#" ValidateRequest="false" Inherits="System.Web.Mvc.ViewPage<dynamic>"  %>

最后,修改webconfig文件:

<system.web>
   <httpRuntime requestValidationMode="2.0" requestPathInvalidCharacters="" />
   <pages validateRequest="false">
4 </system.web>

END.