asp.Net与KindEditor使用心得
这几天写毕业设计要用到在线编辑器，说真心话那老师不提编辑器我还真不懂什么叫编辑器。回到宿舍百度了下编辑器，发现国外国内都有，反正眼花缭乱，无从下手，心情瞬间抵达低谷(因为我编程就是超级菜鸟)，我首次尝试的是xhEidtor(可能我比较笨，配置有点难)，弄了一天算是弄懂了点，在ff浏览器调试成功了，我很开心，但是当我转到Ie调试的时候(在web设计中我最讨厌IE)，上传图片这个选择框打不开，这问题我溜到死胡同了，弄了好久也没弄出什么来，心情也非常不爽。无聊的浏览网页中发现了KindEditor，虽然也是国产，我给他评价：通俗易懂、便捷，他没有xhEidtor配置起来麻烦，在xhEidtor的基础上我只花了一天就弄懂KindEditor这个编辑器，用起来得心应手，成就感瞬间遍布全身。哈哈扯远了~不多说，上代码
- 首先下载最新版的KindEditor 网址:http://kindeditor.net/
- 新建asp.net项目，目录新建js、KindEditor、Uploads文件夹
- 把文件解压出来，选择选中的文件放到项目的KindEditor文件夹里头，下载个Jquery.js放在js里头
4.新建一个网页在head里面添加好引用
<head runat="server">
<title></title>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<link href="KindEditor/themes/default/default.css" rel="stylesheet" charset="utf-8" type="text/css" />
<script src="KindEditor/kindeditor-min.js" charset="utf-8" type="text/javascript"></script>
<script src="KindEditor/lang/zh_CN.js" charset="utf-8" type="text/javascript"></script>5.然后初始化KindEditor 这段也是加在head里面
<script type="text/javascript">
KindEditor.ready(
function (K) {
editor = K.create('#content1', {
//上传管理
uploadJson: 'KindEditor/asp.net/upload_json.ashx',
//文件管理
fileManagerJson: 'KindEditor/asp.net/file_manager_json.ashx',
allowFileManager: true,
//要取值设置这里 这个函数就是同步KindEditor的值到textarea文本框
afterCreate: function () {
var self = this;
K.ctrl(document, 13, function () {
self.sync();
K('form[name=example]')[0].submit();
});
K.ctrl(self.edit.doc, 13, function () {
self.sync();
K('form[name=example]')[0].submit();
});
},
//上传后执行的回调函数,获取上传图片的路径
afterUpload: function (data) {
alert(data);
},
//同时设置这里
afterBlur: function () {
this.sync();
},
width:'700px;',
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>6.然后只要在body里面加个textarea 设置Id就能显示KindEditor编辑框了
<body>
<form id="form1" runat="server">
<div id="main">
<textarea id="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;" runat="server"></textarea><br />
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /><br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>初步就这样了
到了这里也就到了重要的地方文件上传，这个我功能真的是让我弄了好久。不断努力下还是成功实现了上传
这是upload_json.ashx代码我修改了路径别的都没改变
//String aspxUrl = context.Request.Path.Substring(0, context.Request.Path.LastIndexOf("/") + 1);
//文件保存目录路径
String savePath = "Uploads/";
//文件保存目录URL
String saveUrl = "Uploads/";
//定义允许上传的文件扩展名
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 = 1000000;
this.context = context;
HttpPostedFile imgFile = context.Request.Files["imgFile"];
if (imgFile == null)
{
showError("请选择文件。");
}
String originalPath = context.Server.MapPath(savePath);//获取保存路径
String dirPath = originalPath.Replace("KindEditor\\asp.net\\", "");//截取到自己建立文件夹路径弄完这些心总算放下了，唯一不足就是那个空间他可以查看图片但是不能修改删除图片。
我度娘了下发现官网有过这样的例子不过是Asp的
图片空间文件增加删除文件、文件夹功能（ASP语言环境）
不过我还是要感谢他的这个例子让我在asp.net中完成了这个功能
这是filemanager.js的改动部分和原作者有少许的不同
并且要注意的是post跳转的路径是你ui页面到删除事件的路径
/************************************************************************/
/* */
/************************************************************************/
function createList(result) {
createCommon(result, createList);
var table = document.createElement('table');
table.className = 'ke-table';
table.cellPadding = 0;
table.cellSpacing = 0;
table.border = 0;
bodyDiv.append(table);
var fileList = result.file_list;
for (var i = 0, len = fileList.length; i < len; i++) {
var data = fileList[i], row = K(table.insertRow(i));
row.mouseover(function (e) {
K(this).addClass('ke-on');
})
.mouseout(function (e) {
K(this).removeClass('ke-on');
});
var iconUrl = imgPath + (data.is_dir ? 'folder-16.gif' : 'file-16.gif'),
img = K('<img src="' + iconUrl + '" width="16" height="16" alt="' + data.filename + '" align="absmiddle" />'),
IsDirYN = data.is_dir ? "D" : "F",
CurFileUrl = K.formatUrl(result.current_url + data.filename, 'absolute'),
//向[0]单元格中添加img+文件名
cell0 = K(row[0].insertCell(0)).addClass('ke-cell ke-name').append(img).append(document.createTextNode(' ' + data.filename));
if (!data.is_dir || data.has_file) {
row.css('cursor', 'pointer');
cell0.attr('title', data.filename);
bindEvent(cell0, result, data, createList);
} else {
cell0.attr('title', lang.emptyFolder);
}
K(row[0].insertCell(1)).addClass('ke-cell ke-size').html(data.is_dir ? '-' : Math.ceil(data.filesize / 1024) + 'KB'); //向[1]单元格中添加文件大小
K(row[0].insertCell(2)).addClass('ke-cell ke-datetime').html(data.datetime); //向[2]单元格中添加文件时间
K(row[0].insertCell(3)).addClass('ke-cell ke-operation').html("<a class='OperationBtn' href='#' DeUrl='" + CurFileUrl + "' IsFrd='" + IsDirYN + "'>Del</a>"); //向[3]单元格中添加文件操作
}
//这是删除代码
K(".OperationBtn").click(function () {
var $this = K(this),
CrrentDelUrl = $this.attr("DeUrl");
CurrentIsDir = $this.attr("IsFrd");
var info;
if (CurrentIsDir == "D") {
info = "文件夹";
} else {
info = "文件";
}
if (!confirm("确定删除：" + info + "？")) { return false }
$.post('KindEditor/asp.net/delete_img.ashx', { "DeleteFileDirUrl": CrrentDelUrl, "IsFileDir": CurrentIsDir }, function (data) { alert(data); });
});
}
function createView(result) {
createCommon(result, createView);
var fileList = result.file_list;
for (var i = 0, len = fileList.length; i < len; i++) {
var data = fileList[i],
div = K('<div class="ke-inline-block ke-item"></div>');
bodyDiv.append(div);
var AltTxt = data.is_dir ? "打开文件夹：" : "引用文件：",
AltIco = data.is_dir ? "open.png" : "quote.png",
IsDirYN = data.is_dir ? "D" : "F",
CurFileUrl = K.formatUrl(result.current_url + data.filename, 'absolute'),
QuoteIcon = "<img class='QuoteBtn' src='" + imgPath + AltIco + "' Style='width:30px;height:30px;position:absolute;top:30px;right:30px;display:none;' alt='" + AltTxt + CurFileUrl + "' title='" + AltTxt + CurFileUrl + "' />", //定义引用按钮样式
DeleteIcon = "<img class='DeleteBtn' src='" + imgPath + "delete.png' Style='width:30px;height:30px;position:absolute;top:-15px;right:-15px;display:none;' alt='删除：" + CurFileUrl + "' title='删除：" + CurFileUrl + "' DeUrl='" + CurFileUrl + "' IsFrd='" + IsDirYN + "' />"; //定义删除按钮样式
var photoDiv = K('<div class="ke-inline-block ke-photo">' + QuoteIcon + DeleteIcon + '</div>') //图片DIV
.mouseover(function (e) {
K(this).addClass('ke-on');
K(this).children().eq(0).css('display', 'block'); //显示引用按钮
K(this).children().eq(1).css('display', 'block'); //显示删除按钮
})
.mouseout(function (e) {
K(this).removeClass('ke-on');
K(this).children().eq(0).css('display', 'none'); //隐藏引用按钮
K(this).children().eq(1).css('display', 'none'); //隐藏删除按钮
});
div.append(photoDiv);
var fileUrl = result.current_url + data.filename,
iconUrl = data.is_dir ? imgPath + 'folder-64.gif' : (data.is_photo ? fileUrl : imgPath + 'file-64.gif'),
filesiz = data.is_dir ? '' : ' (' + Math.ceil(data.filesize / 1024) + 'KB)'; //文件尺寸
var img = K('<img src="' + iconUrl + '" width="80" height="80" alt="' + data.filename + filesiz + '" title="' + data.filename + filesiz + '" />');
if (!data.is_dir || data.has_file) {
photoDiv.css('cursor', 'pointer');
bindTitle(photoDiv, data);
bindEvent(photoDiv, result, data, createView);
} else {
photoDiv.attr('title', lang.emptyFolder);
}
photoDiv.append(img);
div.append('<div class="ke-name" title="' + data.filename + '">' + data.filename + '</div>');
}
//增加删除代码
K(".DeleteBtn").click(function () {
var $this = K(this),
CrrentDelUrl = $this.attr("DeUrl");
CurrentIsDir = $this.attr("IsFrd");
var info;
if (CurrentIsDir == "D") {
info = "文件夹";
} else {
info = "文件";
}
if (!confirm("确定删除：" + info + "？")) { return false }
$.post('KindEditor/asp.net/delete_img.ashx', { "DeleteFileDirUrl": CrrentDelUrl, "IsFileDir": CurrentIsDir }, function (data) { alert(data); });
});
}
viewTypeBox.val(viewType);
reloadPage('', orderTypeBox.val(), viewType == 'VIEW' ? createView : createList);
return dialog;
}最后贴上删除的代码delete_img.ashx
namespace editor.KindEditor.asp.net
{
/// <summary>
/// delete_img 的摘要说明
/// </summary>
public class delete_img : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string DeleteUrl = context.Request.Form["DeleteFileDirUrl"];//要删除的文件路径
string IsDir = context.Request.Form["IsFileDir"];//判断是删除文件【D】还是文件夹【F】
string err = "";
try
{
if (!string.IsNullOrEmpty(DeleteUrl) && !string.IsNullOrEmpty(IsDir))//判断是否存在文件
{
//删除文件操作
if (IsDir == "F")
{
DeletePic(DeleteUrl);
err = "文件已删除";
}
else
{
DeleteDirectory(DeleteUrl);
err = "文件夹已删除";
}
}
else
{
err = "文件不存在！";
}
}
catch { err = "删除失败！"; }
context.Response.Write(err);
}
public bool IsReusable
{
get
{
return false;
}
}
/// <summary>
/// 删除非空文件夹
/// </summary>
/// <param name="PicPath"></param>
public static void DeleteDirectory(string PicPath)
{
string path = string.Format(@"{0}\{1}", GetPhysicalPath(), PicPath);
DirectoryInfo dir = new DirectoryInfo(path);
if (dir.Exists)
{
DirectoryInfo[] childs = dir.GetDirectories();
foreach (DirectoryInfo child in childs)
{
child.Delete(true);
}
dir.Delete(true);
}
}
/// <summary>
/// 删除图片
/// </summary>
/// <param name="PicPath"></param>
public static void DeletePic(string PicPath)
{
string path = string.Format(@"{0}\{1}", GetPhysicalPath(), PicPath);
if (File.Exists(path))
{
FileInfo info = new FileInfo(path); ;
try
{
info.Delete();
}
catch (Exception exception)
{
throw new ApplicationException(exception.Message);
}
}
}
public static string GetPhysicalPath()
{
return HttpContext.Current.Request.ServerVariables["APPL_PHYSICAL_PATH"];
}
}
}现在存在的问题就是删除成功后不能刷新文件空间，这样使得他不怎么友好希望有能力的朋友帮忙完善也可以 企鹅：6671246交流
609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
