这篇文章主要为大家分享了ASP .网配置KindEditor文本编辑器图文教程，很实用的学习教程，感兴趣的小伙伴们可以参考一下
1.什么是KindEditor
KindEditor是一套开源的在线超文本标记语言编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用KindEditor把传统的多行文本输入框（文本区域)替换为可视化的富文本输入框KindEditor .使用Java脚本语言编写，可以无缝地与Java .NET、PHP、ASP等程序集成，比较适合在羧甲基淀粉钠商城、论坛、博客、维基、电子邮件等互联网应用上使用。
2.前期准备
到官网下载最新版的KindEditor 4.11，解压文件后可得
文件结构：
asp:与白杨结合的示例代码
asp.net:与ASP。网结合的示例代码
附：上传文件的根目录，可在相关的代码中修改
示例：功能演示的示例代码
jsp:与jsp结合的示例代码
郎：语言包
php:与服务器端编程语言(专业超文本预处理器的缩写)结合的示例代码
插件：控件的功能代码的实现
kindeditor.js:配置文件
kindeditor-min.js:集成文件
由于使用的是ASP .网，所以将不需要的文件夹删掉。其中在ASP。网中demo.aspx是参考代码，也可以删掉。
3.配置KindEditor
(1)新建网站，将精简后的kindeditor文件夹放到网站根目录下下，并且引用善良的编辑/ASP。net/bin/lit JSON。动态链接库文件。
(2)新建索引。aspx文件，引入相关文件
link href= kind editor/plugins/code/pre tify。CSS rel=样式表 type= text/CSS /
script src= kind editor/lang/zh _ cn。js type= text/JavaScript /script
script src= kind editor/kind editor。js type= text/JavaScript /script
script src= kind editor/plugins/code/pre tify。js type= text/JavaScript /script
脚本类型=文本/javascript
KindEditor.ready(函数(K) {
var editor=K.create(#content ，{
//上传管理
上传JSON:善良的编辑器/ASP。net/upload _ JSON。ashx ，
//文件管理
file manager JSON: kind editor/ASP。net/file _ manager _ JSON。ashx ，
allowFileManager:真的，
//设置编辑器创建后执行的回调函数
afterCreate: function () {
var self=this
K.ctrl(文档，13,函数(){
自我。sync()；
K(form[name=example])[0].submit()；
});
K.ctrl(self.edit.doc，13，function () {
自我。sync()；
K(form[name=example])[0].submit()；
});
},
//上传文件后执行的回调函数，获取上传图片的路径
上传后：函数(url) {
警报（网址);
},
//编辑器高度
宽度："700像素",
//编辑器宽度
高度："450像素",
//配置编辑器的工具栏
项目：[
源, | ,撤消,重做, | ,预览,打印,模板,代码,剪切,复制,粘贴，
plainpaste ， wordpaste ， | ， justifyleft ， justifycenter ， justifyright ，
justifyfull ， insertorderedlist ， insertunorderedlist ， indent ，下标，
上标， clearhtml ， quickformat ， selectall ， | ， fullscreen ，/，
格式块,字体名,字体大小, | ,前景色， hilitecolor ，粗体，
斜体,下划线,删除线,行高,删除格式, | ,图像,多图像，
flash ， media ， insertfile ， table ， hr ， emoticons ， baidumap ， pagebreak ，
锚点,链接,取消链接, | ,关于
]
});
蛮印()；
});
/脚本
(3)在页面中添加一个文本框控件，将身份证明(识别)命名为内容，把属性文本模式属性改为多线
身体
表单id=form1 runat=server
div id=main
ASP:TextBox id= content name= content text mode= MultiLine runat= server /ASP:TextBox
/div
/表单
/body
(4)在浏览器查看
4.附件上传原理
在ASP。网文件夹下有两个重要的file_manager_json.ashx，upload_json.ashx，一个负责文件管理，一个负责上传管理。你可以根据自己需求进行相关修改。
原理：
通过实现接口IHttpHandler来接管超文本传送协议请求。file_manager_json.ashx
% @ web处理程序语言= c# class=文件管理器 %
/**
*好心的编辑ASP.NET
* 文件管理
*/
使用系统；
使用系统。收藏；
使用系统网页。
使用系统。木卫一；
使用系统正文。正则表达式；
使用利特森
使用系统。集合。泛型；
公共类文件管理器：IHttpHandler
{
公共void ProcessRequest(HttpContext上下文)
{
String aspxUrl=context .请求。Path.Substring(0，上下文请求。路径。lastindexof(/)1)；
//根目录路径，相对路径
字符串根路径=http://www.cnblogs.com/attached/；
//根目录URL，可以指定绝对路径，比如http://www.yoursite.com/attached/
字符串根URL=aspx URL http://www.cnblogs.com/attached/；
//图片扩展名
字符串文件类型=gif，jpg，jpeg，png，BMP ；
字符串当前路径=" "；
字符串当前URL=
字符串当前目录路径=" "；
字符串moveupDirPath=
字符串目录路径=上下文服务器。MapPath(根路径)；
字符串目录名=上下文请求。查询字符串[ dir ]；
如果(!字符串IsNullOrEmpty(目录名)){
如果(数组IndexOf(图像，flash，媒体，文件)。Split(，)，dirName)==-1) {
语境100 .回应。写(无效的目录名。);
语境100 .回应。end()；
}
dirPath=dirName /；
根URL=dirName /；
如果(!目录。存在（目录路径)){
目录。创建目录（目录路径);
}
}
//根据小路参数，设置各路径和统一资源定位器
字符串路径=上下文请求。查询字符串[ path ]；
路径=字符串IsNullOrEmpty(路径)?"":路径；
如果(路径== )
{
currentPath=目录路径
currentUrl=rootUrl
当前目录路径=" "；
moveupDirPath=
}
其他
{
currentPath=目录路径路径；
currentUrl=rootUrl路径；
currentDirPath=路径
moveupDirPath=Regex .替换(当前路径，@ ).*?)[^/] /$, $1);
}
//排序形式名称、大小或类型
字符串顺序=上下文请求。查询字符串[ order ]；
顺序=字符串IsNullOrEmpty(order)？订单. to lower()；
//不允许使用.移动到上一级目录
if (Regex .IsMatch(路径，@。.))
{
语境100 .回应。写(不允许访问。);
语境100 .回应。end()；
}
//最后一个字符不是/
如果（路径！= !路径EndsWith(/))
{
语境100 .回应。写(参数无效。);
语境100 .回应。end()；
}
//目录不存在或不是目录
如果(!目录。存在（当前路径))
{
语境100 .回应。写(目录不存在。);
语境100 .回应。end()；
}
//遍历目录取得文件信息
string[]目录列表=目录获取目录(当前路径)；
字符串[]文件列表=目录获取文件(当前路径)；
开关（顺序)
{
案例"尺寸":
数组Sort(dirList，new name sorter())；
数组Sort(fileList，new size sorter())；
打破；
案例"类型":
数组Sort(dirList，new name sorter())；
数组Sort(fileList，new TypeSorter())；
打破；
案例"名称":
默认值：
数组Sort(dirList，new name sorter())；
数组Sort(fileList，new name sorter())；
打破；
}
哈希表结果=新哈希表();
result[ move up _ dir _ path ]=moveupDirPath；
结果[当前目录路径]=当前目录路径；
结果[当前url]=当前全球资源定位器(Uniform Resource Locator)
结果[total_count]=目录列表。长度文件列表。长度；
list hashtable dirfile list=new list hashtable()；
result[ file _ list ]=dir文件列表；
for(int I=0；我目录。长度；我)
{
目录信息目录=新的目录信息(目录列表[I])；
哈希表hash=new哈希表()；
hash[ is _ dir ]=true；
hash[has_file]=(dir .GetFileSystemInfos().长度0);
哈希[ filesize ]=0；
hash[ is _ photo ]=false；
哈希[ filetype ]= ；
哈希[文件名]=目录。姓名；
哈希[日期时间]=目录LastWriteTime。ToString( yyyy-MM-DD HH:MM:ss )；
目录文件列表。添加（哈希);
}
for(int I=0；我整理文件。长度；我)
{
FileInfo file=new FileInfo(fileList[I])；
哈希表hash=new哈希表()；
hash[ is _ dir ]=false；
hash[ has _ file ]=false；
哈希[filesize]=文件。长度；
哈希[is_photo]=(数组IndexOf(文件类型。分割(,),文件。扩展名。子字符串(1).to lower())=0)；
哈希[文件类型]=文件10 .延期。子串(1)；
哈希[文件名]=文件。姓名；
哈希[日期时间]=文件LastWriteTime。ToString( yyyy-MM-DD HH:MM:ss )；
目录文件列表。添加（哈希);
}
语境100 .回应。添加标头( Content-Type ， application/JSON；charset=UTF-8 )；
语境100 .回应。写(JsonMapper .托吉森(结果));
语境100 .回应。end()；
}
公共类名分类器：I比较器
{
公共（同Internationalorganizations）国际组织比较（对象x，对象y)
{
if (x==null y==null)
{
返回0;
}
if (x==null)
{
return-1；
}
if (y==null)
{
返回1;
}
FileInfo xInfo=new FileInfo(x . ToString())；
文件信息佛印=new FileInfo(y . ToString())；
还新佛。全名。比较（佛印。全名);
}
}
公共类大小排序器：I比较器
{
公共（同Internationalorganizations）国际组织比较（对象x，对象y)
{
if (x==null y==null)
{
返回0;
}
if (x==null)
{
return-1；
}
if (y==null)
{
返回1;
}
FileInfo xInfo=new FileInfo(x . ToString())；
文件信息佛印=new FileInfo(y . ToString())；
还新佛。长度。比较（佛印。长度);
}
}
公共类类型排序器：I比较器
{
公共（同Internationalorganizations）国际组织比较（对象x，对象y)
{
if (x==null y==null)
{
返回0;
}
if (x==null)
{
return-1；
}
if (y==null)
{
返回1;
}
FileInfo xInfo=new FileInfo(x . ToString())；
文件信息佛印=new FileInfo(y . ToString())；
还新佛。扩展。比较(佛印。延伸);
}
}
公共布尔值是可重用的
{
得到
{
返回真实的
}
}
}
upload_json.ashx
% @ web处理程序语言= c# class= Upload %
/**
* KindEditor ASP .网
* 上传管理
*/
使用系统；
使用系统。收藏；
使用系统网页。
使用系统。木卫一；
使用系统。全球化；
使用利特森
公共类上传：IHttpHandler
{
私有HttpContext上下文；
公共void ProcessRequest(HttpContext上下文)
{
String aspxUrl=context .请求。Path.Substring(0，上下文请求。路径。lastindexof(/)1)；
//文件保存目录路径
字符串保存路径=http://www.cnblogs.com/attached/；
//文件保存目录统一资源定位器
字符串保存URL=aspx URL http://www.cnblogs.com/attached/；
//定义允许上传的文件扩展名
哈希表ext table=new Hashtable()；
可扩展.Add(image ， gif，jpg，jpeg，png，BMP )；
可扩展.Add(flash ， swf，flv )；
可扩展.Add(media ， swf，flv，mp3，wav，wma，wmv，mid，avi，mpg，asf，rm，rmvb )；
可扩展.Add(file ， doc，docx，xls，xlsx，ppt，htm，html，txt，zip，rar，gz，bz2 )；
//最大文件大小
int maxSize=1000000
this.context=上下文
HttpPostedFile imgFile=context .请求。files[ img file ]；
if (imgFile==null)
{
showError(请选择文件。);
}
字符串目录路径=上下文服务器。MapPath(保存路径)；
如果(!目录。存在（目录路径))
{
showError(上传目录不存在。);
}
字符串目录名=上下文请求。查询字符串[ dir ]；
如果(字符串IsNullOrEmpty(目录名)){
dirName= image
}
如果(!可扩展.包含密钥(目录名)){
showError(目录名不正确。);
}
String fileName=imgFile .文件名；
String fileExt=Path .GetExtension(文件名)。降低()；
if (imgFile .InputStream==null || imgFile .长度maxSize)
{
showError(上传文件大小超过限制。);
}
如果(字符串IsNullOrEmpty(fileExt) ||数组((String)ext table[dirName])的索引.Split(，)，fileExt .子字符串(1)。ToLower())==-1)
{
showError(上传文件扩展名是不允许的扩展名% 22 n只允许((String)extTable[dirName])格式。);
}
//创建文件夹
dirPath=dirName /；
保存URL=dirName /；
如果(!目录。存在（目录路径)){
目录。创建目录（目录路径);
}
字符串ymd=日期时间现在。ToString(yyyyMMdd ，DateTimeFormatInfo .不变信息)；
dirPath=ymd /；
保存URL=ymd /；
如果(!目录。存在（目录路径)){
目录。创建目录（目录路径);
}
字符串newFileName=DateTime .现在。ToString( yyyymmdd hhmmss _ ffff)，DateTimeFormatInfo .不变信息)fileExt
string file path=dir path新文件名；
图像文件.另存为(文件路径);
字符串文件URL=保存URL新文件名；
哈希表hash=new哈希表()；
哈希[ error ]=0；
hash[ URL ]=文件URL；
语境100 .回应。添加标题( Content-Type ， text/html；charset=UTF-8 )；
语境。Response.Write(JsonMapper。ToJson(hash))；
语境。response . End()；
}
私有void showError(字符串消息)
{
哈希表hash=new Hashtable()；
hash[ error ]=1；
哈希[消息]=消息；
语境。response . add header( Content-Type ， text/html；charset=UTF-8 )；
语境。Response.Write(JsonMapper。ToJson(hash))；
语境。response . End()；
}
公共布尔值是可重用的
{
得到
{
返回true
}
}
}
5.优化改进
使用KindEditor文本编辑器时，发现无法修改上传图片的信息，删除图片等。在图片空间，我不能做目录操作。我觉得这是比CKEditor和CKFinder结合的文本编辑器弱的地方。
想了想，有两个办法可以解决：
方法一、
独立编写一个图片管理模块，用于可视化操作。方法二、
修改plugins/file manager/file manager . js与handler结合操作。(该方法具有良好的可扩展性)如果有人解决了这个问题，希望大家分享一下。
示例：KindEditor文本编辑器配置
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
