在线HTML编辑器
官网：http://kindeditor.net/demo.php
源码：https://github.com/SeaLee02/FunctionModule 文件夹UploadFiles/WebDemo/UpControl/Editor.aspx和UploadFiles/WebDemo/UpControl2/EditDemo.aspx
下面用到的editor文件夹,下载：点击下载editor文件夹JS
运行效果：
首先你需要把样式搭建出来
这里的文本框位子最后会被我们的编辑器取代，文本框作用赋值和取值
引进我们的JS
JS代码：
<script>
'use strict';
$(document).ready(function () {
editor = KindEditor.create('.editor', {
width: '99.5%',
height: '350px',
resizeType: 1,
uploadJson: '../tool/upload_ajax.ashx?action=EditorFile&IsWater=1', //编辑器上传图片
fileManagerJson: '../tool/upload_ajax.ashx?action=ManagerFile', //网络上传图片
allowFileManager: true,
afterBlur: function () { //这个方法必须，在4.1中不加这个我们的textarea是取不到值的
this.sync();
}
});
});
</script>
上面的这么我们弄完了之后页面就会出来了，编辑器里面有一个上传图片的按钮我们是用不了的，所以再有了下面的一般处理程序
upload_ajax.ashx 页面：
public void ProcessRequest(HttpContext context) { //取得处事类型 string action = HttpContext.Current.Request.QueryString["action"]; switch (action) { case "EditorFile": //编辑器文件 EditorFile(context); break; case "ManagerFile": //管理文件 ManagerFile(context); break; default: //普通上传 UpLoadFile(context); break; } }
#region 编辑器上传 private void EditorFile(HttpContext context) { bool _iswater = false; //默认不打水印 if (context.Request.QueryString["IsWater"] == "1") _iswater = true; HttpPostedFile imgFile = context.Request.Files["imgFile"]; if (imgFile == null) { showError(context, "请选择要上传文件！"); return; } Upload upFiles = new Upload(); string remsg = upFiles.fileSaveAs(imgFile, false, _iswater); //这个保存方法 文件上传（插件版）里面有介绍 Dictionary<string, object> dic = JsonHelper.DataRowFromJSON(remsg); string status = dic["status"].ToString(); string msg = dic["msg"].ToString(); if (status == "0") { showError(context, msg); return; } string filePath = dic["path"].ToString(); //取得上传后的路径 Hashtable hash = new Hashtable(); hash["error"] = 0; hash["url"] = filePath; context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8"); context.Response.Write(JsonHelper.ObjectToJSON(hash)); //转成json格式 context.Response.End(); } private void showError(HttpContext context, string message) { Hashtable hash = new Hashtable(); hash["error"] = 1; hash["message"] = message; context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8"); context.Response.Write(JsonHelper.ObjectToJSON(hash)); context.Response.End(); } #endregion
JsonHelper这个类，会在项目里面，需要的可以去那里查看，如果不想这么麻烦 等下回介绍另一种转化的方法
浏览器的上传方式就不介绍了，一般不会用，需要的话源码里面去看。
编辑器基本上已经完成。
存，取数据
在页面上我放了两个按钮
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { if (Session["test"] != null) { txt_Analysis.Value = Session["test"].ToString(); } else { txt_Analysis.Value = ""; } } } /// <summary> /// 保存 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void LinkButton1_Click(object sender, EventArgs e) { Session["test"] = txt_Analysis.Value; //保存的是html标签 Response.Redirect("Editor.aspx"); } /// <summary> /// 清除 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void LinkButton2_Click(object sender, EventArgs e) { Session["test"] = null; Response.Redirect("Editor.aspx"); }
经过试验，证明可以存到和取到
注：我们创建编辑器的时候需要把
afterBlur: function () {
this.sync();
}
参数加上，不然存取不到值。
第二种方法——简单的写法
如果后台不需要那么方法，我们可以简单一点
<div class="group"> <label class="title">类别说明</label> <div class="controls"> <asp:TextBox runat="server" ID="txtExplain" TextMode="MultiLine" Width="1000" Height="500"></asp:TextBox> </div> </div> <asp:LinkButton ID="lnkBtnSave" runat="server" OnClick="lnkBtnSave_Click">保存</asp:LinkButton> <br /> <asp:LinkButton ID="lnkBtnClear" runat="server" OnClick="lnkBtnClear_Click">清除Session</asp:LinkButton> <script src="../JS/jquery-1.11.0.min.js"></script> <script src="../editor/kindeditor-min.js"></script> <%--<script src="../editor/lang/zh-CN.js"></script>--%> <script> $(function () { KindEditor.ready(function (K) { var editor1 = K.create('#txtExplain', { cssPath: '/editor/plugins/code/prettify.css', uploadJson: '/Tools/upload_json.ashx', fileManagerJson: '/Tools/file_manager_json.ashx', allowFileManager: true, afterBlur: function () { this.sync(); //这个方法必须，不加这个我们的textarea是取不到值的 } }); }); }) </script>
upload_json.ashx页面： 后台处理简单一点
public void ProcessRequest(HttpContext context) { SortedList<string, object> values = new SortedList<string, object>(); JavaScriptSerializer js = new JavaScriptSerializer(); HttpPostedFile _upfile = context.Request.Files["imgFile"]; if (_upfile == null) { values.Add("error", 1); values.Add("message", "上传失败，没有选择文件"); context.Response.Write(js.Serialize(values)); return; } context.Response.Write(js.Serialize(fileSaveAs(_upfile))); } ///<summary> /// 文件上传方法E /// </summary> public SortedList<string, object> fileSaveAs(HttpPostedFile _postedFile) { SortedList<string, object> values = new SortedList<string, object>(); try { string fileType = "jpg|png|jpeg|gif"; string _fileExt = _postedFile.FileName.Substring(_postedFile.FileName.LastIndexOf(".") + 1); //验证合法的文件 if (!CheckFileExt(fileType, _fileExt)) { values.Add("error", 0); values.Add("message", "上传失败，错误的文件类型"); return values; } int fileSize = 3*1024; if (fileSize > 0 && _postedFile.ContentLength > fileSize * 1024) { values.Add("error", 0); values.Add("message", "上传失败，您选择的文件过大"); return values; } string _fileName = DateTime.Now.ToString("yyyyMMddHHmmssff") + "." + _fileExt; string filePath = "/UplaodFileds/"; //检查保存的路径 是否有/开头结尾 if (filePath.StartsWith("/") == false) filePath = "/" + filePath; if (filePath.EndsWith("/") == false) filePath = filePath + "/"; //按日期归类保存 string _datePath = DateTime.Now.ToString("yyyyMMdd") + "/"; filePath += _datePath; //获得要保存的文件路径 string serverFileName = filePath + _fileName; //物理完整路径 string toFileFullPath = HttpContext.Current.Server.MapPath(filePath); //检查是否有该路径没有就创建 if (!Directory.Exists(toFileFullPath)) { Directory.CreateDirectory(toFileFullPath); } //将要保存的完整文件名 string toFile = toFileFullPath + _fileName; //保存文件 _postedFile.SaveAs(toFile); values.Add("error", 0); values.Add("message", "上传成功"); values.Add("url", serverFileName); return values; } catch { return values; } } /// <summary> /// 检查是否为合法的上传文件 /// </summary> /// <returns></returns> private bool CheckFileExt(string _fileType, string _fileExt) { string[] allowExt = _fileType.Split('|'); for (int i = 0; i < allowExt.Length; i++) { if (allowExt[i].ToLower() == _fileExt.ToLower()) { return true; } } return false; }
