在线html文件编辑,在线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代码：

'use strict';

$(document).ready(function () {

editor= KindEditor.create('.editor', {'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();

}

});

});

上面的这么我们弄完了之后页面就会出来了，编辑器里面有一个上传图片的按钮我们是用不了的，所以再有了下面的一般处理程序

upload_ajax.ashx  页面：

public voidProcessRequest(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 voidEditorFile(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= newUpload();string remsg = upFiles.fileSaveAs(imgFile, false, _iswater); //这个保存方法 文件上传(插件版)里面有介绍

Dictionary 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 = newHashtable();

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, stringmessage)

{

Hashtable hash= newHashtable();

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(objectsender, EventArgs e)

{if (!IsPostBack)

{if (Session["test"] != null)

{

txt_Analysis.Value= Session["test"].ToString();

}else{

txt_Analysis.Value= "";

}

}

}///

///保存///

///

///

protected void LinkButton1_Click(objectsender, EventArgs e)

{

Session["test"] =txt_Analysis.Value;//保存的是html标签

Response.Redirect("Editor.aspx");

}///

///清除///

///

///

protected void LinkButton2_Click(objectsender, EventArgs e)

{

Session["test"] = null;

Response.Redirect("Editor.aspx");

}

经过试验，证明可以存到和取到

注：我们创建编辑器的时候需要把

afterBlur: function () {

this.sync();

}

参数加上，不然存取不到值。

第二种方法——简单的写法

如果后台不需要那么方法，我们可以简单一点

类别说明

保存

清除Session

--%>

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是取不到值的

}

});

});

})

upload_json.ashx页面：  后台处理简单一点

public voidProcessRequest(HttpContext context)

{

SortedList values = new SortedList();

JavaScriptSerializer js= newJavaScriptSerializer();

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)));

}///

///文件上传方法E///

public SortedListfileSaveAs(HttpPostedFile _postedFile)

{

SortedList values = new SortedList();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", "上传失败，错误的文件类型");returnvalues;

}int fileSize = 3*1024;if (fileSize > 0 && _postedFile.ContentLength > fileSize * 1024)

{

values.Add("error", 0);

values.Add("message", "上传失败，您选择的文件过大");returnvalues;

}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);returnvalues;

}catch{returnvalues;

}

}///

///检查是否为合法的上传文件///

///

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;

}