KindEditor简单使用之textarea

KindEditor富文本框的使用:

网上下载KindEditor包:

直接上代码:

KindEditor放在/Script/editor目录下

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

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

 1 var AjaxHelp = {
 2     GetXhr: function () {  //创建异步对象
 3         var xhr = new XMLHttpRequest();
 4         return xhr;
 5     },
 6     //处理ajax的get请求
 7     ProcessGet: function (url, callback) {
 8         this.ProcessAjax("get", url, null, callback);
 9     },
10     ProcessPost: function (url, params, callback) {
11         this.ProcessAjax("post", url, params, callback);
12     },
13     //统一处理的方法
14     ProcessAjax: function (method, url, params, callback) {
15         //1.0创建异步对象
16         var xhr = this.GetXhr();
17         if (method == "get") {  //2.0打开链接
18             xhr.open("get", url, true); //3.0不使用缓存
19             xhr.setRequestHeader("if-modified-since", "0");
20         } else { //2.0打开链接
21             xhr.open("post", url, true); //3.0将参数放在form data属性中
22             xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
23         }
24         //4.0设置回调函数
25         xhr.onreadystatechange = function () {
26             if (xhr.readyState == 4 && xhr.status == 200) {
27                 //得到从服务器里得到的数据
28                 var content = JSON.parse(xhr.responseText);//---->转成js对象
29                 //调用回调函数(执行自己的业务逻辑)
30                 callback(content);
31             }
32         }
33         //5.0发送请求
34         xhr.send(params);
35     }
36 };

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检测到敏感数据的问题,

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

 1 <script type="text/javascript">
 2         $(function () {
 3             $("#publish").click(function () {
 4                 var content = $("#txt_Content").val();
 5                 var title = $("#txt_Title").val();
 6                 AjaxHelp.ProcessPost("/Publish/PublishNew", "content=" + content + "&title=" + title, function (ajaxObj) {
 7                     if (ajaxObj.Status == 1) {
 8                         alert(ajaxObj.Msg);
 9                         $("#txt_Content").val("");
10                         KindEditor.instances[0].html("");//清空
11                     }
12                     else
13                         alert(ajaxObj.Msg);
14                 });
15             });
16         })
17 </script>

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

 1         [ValidateInput(false)]
 2         public ActionResult PublishNew()
 3         {
 4             string title=Request["title"];
 5             string content=Request["content"];
 6             if (string.IsNullOrEmpty(title))
 7             {
 8                 return Json(new { Status = 0, Msg = "标题不能为空" });
 9             }
10             if (string.IsNullOrEmpty(content))
11             {
12                 return Json(new { Status = 0, Msg = "内容不能为空" });
13             }
14             ConnectedDataBase cdb = WebEnvironment.DefaultDataBase.CreateConnectedDataBase();
15             int i=cdb.ExecuteNonQuery("insert into Publish (PTitle,PContent,PublishDate,IsShow) values ('" + title + "','" + content + "',sysdate,1)");
16             if(i>0)
17             {
18                 return Json(new { Status = 1, Msg = "发布成功" });
19             }
20             else
21                  return Json(new { Status=0,Msg="出现异常"});
22         }

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

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

最后,修改webconfig文件:

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

END.