这篇文章主要为大家分享了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文本编辑器配置
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。