ASP.NET配置KindEditor文本编辑器
文本编辑器:CKEditor和CKFinder KindEditor
1.KindEditor
KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
2.官网: http://kindeditor.net/down.php 下载
解压文件的文件结构:
asp：与asp结合的示例代码
asp.net：与asp.net结合的示例代码
attached：上传文件的根目录，可在相关的代码中修改
examples：功能演示的示例代码
jsp：与jsp结合的示例代码
lang：语言包
php：与php结合的示例代码
plugins：控件的功能代码的实现
kindeditor.js：配置文件
kindeditor-min.js：集成文件
由于使用的是ASP.NET，所以将不需要的文件夹删掉。其中在asp.net中demo.aspx是参考代码，也可以删掉。
3.配置KindEditor
(1)新建网站，将精简后的kindeditor文件夹放到网站根目录下下，并且引用kindeditor/asp.net/bin/LitJSON.dll文件。
(2)新建index.aspx文件，引入相关文件
注意路径的设置:引用文件的路径,上传管理和文件管理的路径
<link href="../kindeditor-4.1.10/plugins/code/prettify.css" rel="stylesheet" type="text/css" />
<script src="../kindeditor-4.1.10/lang/zh_CN.js" type="text/javascript"></script>
<script src="../kindeditor-4.1.10/kindeditor.js" type="text/javascript"></script>
<script src="../kindeditor-4.1.10/plugins/code/prettify.js" type="text/javascript"></script>
<script type="text/javascript">
KindEditor.ready(function (K) {
var editor = K.create('#content_1', {
//上传管理
uploadJson: '../kindeditor-4.1.10/asp.net/upload_json.ashx',
//文件管理
fileManagerJson: '../kindeditor-4.1.10/asp.net/file_manager_json.ashx',
allowFileManager: true, //编辑器高度
width: '624px',
//编辑器宽度
height: '450px',
//配置编辑器的工具栏
items: [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
]
});
prettyPrint();
});
</script>
(3)在页面中添加一个textbox控件，将id命名为content，把属性"TextMode"属性改为Multiline
<body>
<form id="form1" runat="server">
<div id="main">
<asp:TextBox id="content" name="content" TextMode="MultiLine" runat="server"></asp:TextBox>
</div>
</form>
</body>
(4) 按照以后步骤,就可以在浏览器中看到编辑器的模样了
4.附件上传原理
在asp.net文件夹下有两个重要的file_manager_json.ashx，upload_json.ashx，一个负责文件管理，一个负责上传管理。你可以根据自己需求进行相关修改。
原理：通过实现接口IHttpHandler来接管HTTP请求。
注意路径的设置:
file_manager_json.ashx----根目录路径，相对路径,根目录URL，可以指定绝对路径,图片扩展名
upload_json.ashx----文件保存目录路径,文件保存目录URL,定义允许上传的文件扩展名
file_manager_json.ashx
<%@ webhandler Language="C#" class="FileManager" %> /**
* KindEditor ASP.NET
*
* 本ASP.NET程序是演示程序，建议不要直接在实际项目中使用。
* 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。
*
*/ using System;
using System.Collections;
using System.Web;
using System.IO;
using System.Text.RegularExpressions;
using LitJson;
using System.Collections.Generic; public class FileManager : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
String aspxUrl = context.Request.Path.Substring(, context.Request.Path.LastIndexOf("/") + ); //根目录路径，相对路径
String rootPath = "Admin/upload/";
//根目录URL，可以指定绝对路径，比如 http://www.yoursite.com/attached/
String rootUrl = aspxUrl + "Admin/upload/";
//图片扩展名
String fileTypes = "gif,jpg,jpeg,png,bmp"; String currentPath = "";
String currentUrl = "";
String currentDirPath = "";
String moveupDirPath = ""; String dirPath = context.Server.MapPath(rootPath);
String dirName = context.Request.QueryString["dir"];
if (!String.IsNullOrEmpty(dirName)) {
if (Array.IndexOf("image,flash,media,file".Split(','), dirName) == -) {
context.Response.Write("Invalid Directory name.");
context.Response.End();
}
dirPath += dirName + "/";
rootUrl += dirName + "/";
if (!Directory.Exists(dirPath)) {
Directory.CreateDirectory(dirPath);
}
} //根据path参数，设置各路径和URL
String path = context.Request.QueryString["path"];
path = String.IsNullOrEmpty(path) ? "" : path;
if (path == "")
{
currentPath = dirPath;
currentUrl = rootUrl;
currentDirPath = "";
moveupDirPath = "";
}
else
{
currentPath = dirPath + path;
currentUrl = rootUrl + path;
currentDirPath = path;
moveupDirPath = Regex.Replace(currentDirPath, @"(.*?)[^\/]+\/$", "$1");
} //排序形式，name or size or type
String order = context.Request.QueryString["order"];
order = String.IsNullOrEmpty(order) ? "" : order.ToLower(); //不允许使用..移动到上一级目录
if (Regex.IsMatch(path, @"\.\."))
{
context.Response.Write("Access is not allowed.");
context.Response.End();
}
//最后一个字符不是/
if (path != "" && !path.EndsWith("/"))
{
context.Response.Write("Parameter is not valid.");
context.Response.End();
}
//目录不存在或不是目录
if (!Directory.Exists(currentPath))
{
context.Response.Write("Directory does not exist.");
context.Response.End();
} //遍历目录取得文件信息
string[] dirList = Directory.GetDirectories(currentPath);
string[] fileList = Directory.GetFiles(currentPath); switch (order)
{
case "size":
Array.Sort(dirList, new NameSorter());
Array.Sort(fileList, new SizeSorter());
break;
case "type":
Array.Sort(dirList, new NameSorter());
Array.Sort(fileList, new TypeSorter());
break;
case "name":
default:
Array.Sort(dirList, new NameSorter());
Array.Sort(fileList, new NameSorter());
break;
} Hashtable result = new Hashtable();
result["moveup_dir_path"] = moveupDirPath;
result["current_dir_path"] = currentDirPath;
result["current_url"] = currentUrl;
result["total_count"] = dirList.Length + fileList.Length;
List<Hashtable> dirFileList = new List<Hashtable>();
result["file_list"] = dirFileList;
for (int i = ; i < dirList.Length; i++)
{
DirectoryInfo dir = new DirectoryInfo(dirList[i]);
Hashtable hash = new Hashtable();
hash["is_dir"] = true;
hash["has_file"] = (dir.GetFileSystemInfos().Length > );
hash["filesize"] = ;
hash["is_photo"] = false;
hash["filetype"] = "";
hash["filename"] = dir.Name;
hash["datetime"] = dir.LastWriteTime.ToString("yyyy-MM-dd HH:mm:ss");
dirFileList.Add(hash);
}
for (int i = ; i < fileList.Length; i++)
{
FileInfo file = new FileInfo(fileList[i]);
Hashtable hash = new Hashtable();
hash["is_dir"] = false;
hash["has_file"] = false;
hash["filesize"] = file.Length;
hash["is_photo"] = (Array.IndexOf(fileTypes.Split(','), file.Extension.Substring().ToLower()) >= );
hash["filetype"] = file.Extension.Substring();
hash["filename"] = file.Name;
hash["datetime"] = file.LastWriteTime.ToString("yyyy-MM-dd HH:mm:ss");
dirFileList.Add(hash);
}
context.Response.AddHeader("Content-Type", "application/json; charset=UTF-8");
context.Response.Write(JsonMapper.ToJson(result));
context.Response.End();
} public class NameSorter : IComparer
{
public int Compare(object x, object y)
{
if (x == null && y == null)
{
return ;
}
if (x == null)
{
return -;
}
if (y == null)
{
return ;
}
FileInfo xInfo = new FileInfo(x.ToString());
FileInfo yInfo = new FileInfo(y.ToString()); return xInfo.FullName.CompareTo(yInfo.FullName);
}
} public class SizeSorter : IComparer
{
public int Compare(object x, object y)
{
if (x == null && y == null)
{
return ;
}
if (x == null)
{
return -;
}
if (y == null)
{
return ;
}
FileInfo xInfo = new FileInfo(x.ToString());
FileInfo yInfo = new FileInfo(y.ToString()); return xInfo.Length.CompareTo(yInfo.Length);
}
} public class TypeSorter : IComparer
{
public int Compare(object x, object y)
{
if (x == null && y == null)
{
return ;
}
if (x == null)
{
return -;
}
if (y == null)
{
return ;
}
FileInfo xInfo = new FileInfo(x.ToString());
FileInfo yInfo = new FileInfo(y.ToString()); return xInfo.Extension.CompareTo(yInfo.Extension);
}
} public bool IsReusable
{
get
{
return true;
}
}
}
upload_json.ashx
<%@ webhandler Language="C#" class="Upload" %> /**
* KindEditor ASP.NET
*
* 本ASP.NET程序是演示程序，建议不要直接在实际项目中使用。
* 如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。
*
*/ using System;
using System.Collections;
using System.Web;
using System.IO;
using System.Globalization;
using LitJson; public class Upload : IHttpHandler
{
private HttpContext context; public void ProcessRequest(HttpContext context)
{
String aspxUrl = context.Request.Path.Substring(, context.Request.Path.LastIndexOf("/") + ); //文件保存目录路径
String savePath = "Admin/upload/"; //文件保存目录URL
String saveUrl = aspxUrl + "Admin/upload/"; //定义允许上传的文件扩展名
Hashtable extTable = new Hashtable();
extTable.Add("image", "gif,jpg,jpeg,png,bmp");
extTable.Add("flash", "swf,flv");
extTable.Add("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extTable.Add("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); //最大文件大小
int maxSize = ;
this.context = context; HttpPostedFile imgFile = context.Request.Files["imgFile"];
if (imgFile == null)
{
showError("请选择文件。");
} String dirPath = context.Server.MapPath(savePath);
if (!Directory.Exists(dirPath))
{
showError("上传目录不存在。");
} String dirName = context.Request.QueryString["dir"];
if (String.IsNullOrEmpty(dirName)) {
dirName = "image";
}
if (!extTable.ContainsKey(dirName)) {
showError("目录名不正确。");
} String fileName = imgFile.FileName;
String fileExt = Path.GetExtension(fileName).ToLower(); if (imgFile.InputStream == null || imgFile.InputStream.Length > maxSize)
{
showError("上传文件大小超过限制。");
} if (String.IsNullOrEmpty(fileExt) || Array.IndexOf(((String)extTable[dirName]).Split(','), fileExt.Substring().ToLower()) == -)
{
showError("上传文件扩展名是不允许的扩展名。\n只允许" + ((String)extTable[dirName]) + "格式。");
} //创建文件夹
dirPath += dirName + "/";
saveUrl += dirName + "/";
if (!Directory.Exists(dirPath)) {
Directory.CreateDirectory(dirPath);
}
String ymd = DateTime.Now.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo);
dirPath += ymd + "/";
saveUrl += ymd + "/";
if (!Directory.Exists(dirPath)) {
Directory.CreateDirectory(dirPath);
} String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
String filePath = dirPath + newFileName; imgFile.SaveAs(filePath); String fileUrl = saveUrl + newFileName; Hashtable hash = new Hashtable();
hash["error"] = ;
hash["url"] = fileUrl;
context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
context.Response.Write(JsonMapper.ToJson(hash));
context.Response.End();
} private void showError(string message)
{
Hashtable hash = new Hashtable();
hash["error"] = ;
hash["message"] = message;
context.Response.AddHeader("Content-Type", "text/html; charset=UTF-8");
context.Response.Write(JsonMapper.ToJson(hash));
context.Response.End();
} public bool IsReusable
{
get
{
return true;
}
}
}
5.优化改进
使用KindEditor文本编辑器时，发现不能在图片空间中修改已上传图片的信息，删除图片等，也不能进行目录操作，我觉得这是比CKEditor和CKFinder结合的文本编辑器弱势的地方。
有两个方法可以解决：
一是：独立写一个图片管理的模块，进行可视化操作
二是：修改plugins/filemanager/filemanager.js，并结合handler进行操作。（这个方法扩展性比较好）
摘抄自:http://www.cnblogs.com/ForEvErNoME/archive/2012/06/15/2551424.html
ASP.NET配置KindEditor文本编辑器的更多相关文章
- ASP.NET 配置KindEditor文本编辑器
ASP.NET 配置KindEditor文本编辑器 跟着这篇博客做了两个小时,只搞出了下面这么个东西. 时间浪费在了原博客里这样的一句话:将kindeditor/asp.net/bin/LitJSON ...
- ASP.NET配置KindEditor文本编辑器-图文实例
1.什么是KindEditor KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(tex ...
- Django配置富文本编辑器kindeditor
一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...
- asp.net mvc4 使用KindEditor文本编辑器
最近做项目要用文本编辑器,编辑器好多种,这里介绍KindEditor在asp.net mvc4中的使用方法. 一.准备工作: 1.下载KindEditor.去官网:http://www.kindsof ...
- mvc4使用KindEditor文本编辑器
最近做项目要用文本编辑器,编辑器好多种,这里介绍KindEditor在asp.net mvc4中的使用方法. 一.准备工作: 1.下载KindEditor.去官网:http://www.kindsof ...
- laravel-admin 配置富文本编辑器流程
laravel-admin默认去除富文本编辑器的,官方也给出了配置方法. 我配置的是wangEditor,本来配置完后就能愉快得使用了,可万万没想到还是有坑的.默认是用base64上传的,也就是数据库 ...
- 使用kindeditor文本编辑器
aspx中代码: <%@ Page Language="C#" ValidateRequest="false" AutoEventWireup=" ...
- Django-xadmin后台配置富文本编辑器（方法一）
1.https://github.com/twz915/DjangoUeditor3下载包,进入包文件夹,找到DjangoUeditor包拷贝到项目下,和xadmin同级目录 2.找到项目的setti ...
- KindEditor 文本编辑器
官网:http://kindeditor.net/docs/usage.html 目前支持ASP.ASP.NET.PHP.JSP.
随机推荐
- CentOS修改Mysql字符集
1.mysql>show variables like 'character_set%'; 显示如下: +--------------------------+----------------- ...
- 开启两个线程，一个线程打印A～Z，一个线程打印1～52的数据
开启两个线程,一个线程打印A-Z,一个线程打印1-52的数据 import java.util.concurrent.locks.Condition; import java.util.concurr ...
- tomcat manager 配置
使用网页部署新 Web 应用程序或取消现有 Web 应用程序部署,且无需重启容器. 一.开启管理 编辑 conf/tomcat-users.xml 添加如下内容,这里用户名和密码都为 tomcat & ...
- 一些有意思的git
fs: https://github.com/psankar/simplefs https://github.com/gzc/isystem/blob/master/basic/Crash_Consi ...
- shell案例（6）：1、创建用户 2、创建目录 3、创建文件 4、退出
脚本基本要求 1.创建用户2.创建目录3.创建文件4.退出 #!/bin/bash #author:zhiping.wang Check_error() { ] then echo "$1 ...
- UDP打洞原理介绍
NAT穿越模块的设计与实现 Internet的快速发展以及IPv4地址数量的不足使得NAT设备得到了大规模的应用,然而这也给越来越多的端到端通信也带来了不少的麻烦.一般来说,NAT设备允许内网内主机 ...
- Appium移动自动化测试(五)之应用操作
实验简介 对于APP测试来讲, 除了进行功能测试以外, 安装和卸载其实也是一个很重要的测试项. 试想, 如果用脚本来实现了, 可以事先判断该应用是否已安装, 根据判断结果来执行安装和卸载的动作, 循环 ...
- OpenStack 虚拟机启动流程 UML 分析（内含 UML 源码）
目录 文章目录 目录 前言 API 请求 Nova API 阶段 Nova Conductor 阶段 Nova Scheduler 阶段 Nova Compute 阶段(计算节点资源分配部分) Nov ...
- IntelliJ IDEA 2019 注册码 （激活码） 有效期至2100年
IntelliJ IDEA 2019 注册码 (激活码) 有效期至2100年 本人使用的IDEA是最新版:IntelliJ IDEA 2018.3.3 x64 (IntelliJ IDEA官网下载地址 ...
- linux常用命令(15)whereis命令
whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返回所有信息.和find相比,whereis查找的速度非常 ...