[原] 开源HTML文本编辑器--KindEditor

javame 专栏收录该内容
834 篇文章 0 订阅

======================================================
注:本文源代码点此下载
======================================================

[原] 开源html文本编辑器--kindeditor

一、关于kindeditor

kindeditor是一套开源的html可视化编辑器,采用javascript编写,可以使用在java、.net、php、asp程序中。

kindeditor源代码默认在lgpl开源协议下发布,可用于商业用途。

具体参见官方网站:http://www.kindsoft.net/about.php

二、kindeditor源码结构

kindeditor最新版本是3.5.1,下载的压缩包大小为612k,解压缩后的文件大小为1.45m,主要包括以下文件:

源码包文件夹结构如下:

其中asp、asp.net、jsp、php四个文件夹为kindeditor在个程序中使用的代码说明;examples文件夹为kindeditor使用示例;attached文件夹为上传附件的文件夹;plugins为kindeditor的插件文件夹;skins为kindeditor的皮肤文件夹;kindeditor-min.js为压缩版本;kindeditor.js为程序主文件。

在程序中使用我们只需要一下文件即可。

三、kindeditor使用

注:示例采用kindeditor与asp.net程序。

1、将kindeditor文件夹文件添加到项目中。

2、在asp.net页面中添加一个textarea控件,命名为txtcontent,在页面头部假如以下代码:

主要是对文件的引用和控件的初始化,设定id为textarea控件的id即可。

完成之后,打开浏览界面,效果如下:

四、kindeditor上传图片插件

i)上传图片

注:在3.5.1的版本中有采用upload_json.ashx类文件进行图片上传处理,本示例为了兼容vs 2003.net,则采用upload_json.aspx类文件处理,aspx前台页面只保留第一行文件头声明,后台代码如下:其中uplaod为上传图片的文件夹。

上传图片处理类public partial class upload_json : system.web.ui.page

{

protected void page_load(object sender, eventargs e)

{

//文件保存目录路径

string savepath = "/upload/";

//文件保存目录url

string saveurl = savepath;

//上传图片类型

string[] extstr = new string[4];

extstr[0] = ".gif";

extstr[1] = ".jpg";

extstr[2] = ".png";

extstr[3] = ".bmp";

//图片的最大大小

int maxsize = 500000;//500kb

//错误提示

string[] msgstr = new string[3];

msgstr[0] = "上传文件大小超过限制.";

msgstr[1] = "上传文件扩展名是不允许的扩展名.";

msgstr[2] = "上传文件失败\\n请重试.";

string imgwidth = request.form["imgwidth"];

string imgheight = request.form["imgheight"];

string imgborder = request.form["imgborder"];

string imgtitle = request.form["imgtitle"];

string imgalign = request.form["imgalign"];

string imghspace = request.form["imghspace"];

string imgvspace = request.form["imgvspace"];

httppostedfile imgfile = httpcontext.current.request.files["imgfile"];

//获得文件名

string filename = system.io.path.getfilename(imgfile.filename);

if (filename != "")

{

if (imgfile.contentlength > maxsize)

{

alert(msgstr[0]);

}

else

{

string fileextension = system.io.path.getextension(filename).tolower();

if (checkext(extstr, fileextension))

{

//重新为文件命名,时间毫秒部分+扩展名

string imgrename = "" + datetime.now.ticks + fileextension;

文件夹名

//string imgfoldername = datetime.now.tostring("yyyymmdd", datetimeformatinfo.invariantinfo);

try

{

if (!system.io.directory.exists(@server.mappath("" + savepath)))

{

//生成文件完整目录

system.io.directory.createdirectory(@server.mappath("" + savepath));

}

imgfile.saveas(@server.mappath("" + savepath) + imgrename);

}

catch

{

alert(msgstr[2]);

}

string imgurl = saveurl + imgrename;

returnimg(imgurl, imgwidth, imgheight, imgborder, imgtitle, imgalign, imghspace, imgvspace);

}

else

{

alert(msgstr[1]);

}

}

}

}

///

/// 提示关闭层

///

///

private void alert(string msgstr)

{

response.write("");

response.write("");

sb.append("");

sb.append("");

sb.append("");

sb.append("");

response.write(sb.tostring());

}

}

完成之后,进行如下配置,即可上传图片成功,否则,则弹出服务器连接错误的提示消息。

1、修改plugins/image/image.html文件中的

var imageuploadjson = (typeof ke.g[id].imageuploadjson == 'undefined') ? '../handler/upload_json.aspx' : ke.g[id].imageuploadjson;

设置上传文件处理类的路径。

2、在控件初始化时,设定imageuploadjson: '../handler/upload_json.aspx',注:'../handler/upload_json.aspx'路径是针对plugins中image.html文件的相对路径,而非程序页面文件的相对路径。

将此二处设置完成之后,即可上传图片,如图:

ii)浏览图片

同i,浏览图片的操作类file_manager_json.aspx,代码如下:

图片浏览处理类public partial class file_manager_json : system.web.ui.page

{

protected void page_load(object sender, eventargs e)

{

response.clear();

response.contenttype = "application/json;";

response.charset = "utf-8";

string currentpath = "/upload/";

stringbuilder sb = new stringbuilder();

sb.append("{\"moveup_dir_path\":\"\",");

sb.append("\"current_dir_path\":\"" + currentpath + "\",");

sb.append("\"current_url\":\"" + currentpath + "\",");

string[] files = system.io.directory.getfiles(server.mappath("~" + currentpath));

sb.append("\"total_count\":" + files.length + ",");

sb.append("\"file_list\":[");

for (int i = 0; i new fileinfo(files[i]);

sb.append("{\"is_dir\":false,\"has_file\":false,\"filesize\":" + file.length + ",\"dir_path\":\"\",\"is_photo\":true,\"filetype\":\"" + file.extension + "\",\"filename\":\"" + file.name + "\",\"datetime\":\"" + file.creationtime + "\"}");

if (i != files.length - 1)

{

sb.append(",");

}

}

sb.append("]}");

response.write(sb.tostring());

}

}

同i,在控件初始化时,进行filemanagerjson: '../handler/file_manager_json.aspx'即可。

点击浏览,可以看到上传的图片缩略图,如下所示:

五、kindeditor自定义插件

kindeditor提供了比较灵活的控件添加机制,用户可以自行的设计相关插件,来丰富文本编辑器的功能。

具体添加方法,参看http://www.kindsoft.net/doc.php?cmd=plugin

作者:erichen

出处:http://erichen.cnblogs.com/

除特别说明外均为原创,所有内容仅代表个人观点。版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利!

如果我侵犯了您的权益,请发 email给我,我会尽快回复。联系方式: erichen@yeah.net

绿色通道:好文要顶关注我收藏该文与我联系

posted @ 2010-08-29 19:28 erichen 阅读(1074) 评论(7)编辑 收藏

发表评论

2021416

回复 引用 查看

#1楼 2010-08-31 10:23 clyllove

以后需要用的时候就方便咯·~嘿嘿o(∩_∩)o

回复 引用 查看

#2楼[楼主] 2010-08-31 10:24 erichen

@clyllove

呵呵,欢迎来访!

回复 引用 查看

#3楼 2010-09-03 21:36 佳佳李

嗯,是还不错,不知道它呢那个fckeditor比起来哪个好。感觉这个好像还要写脚本,fckeditor看起和.net结合得更紧密,一个标签就可以搞定。

回复 引用 查看

#4楼[楼主] 2010-09-03 22:01 erichen

@佳佳李

这个是国产的,我支持下~~自我感觉吧,这个编辑器控件写的还是相当不错的,目前4.0的版本也在研发中,我觉得这种开源的东西有理由支持一下。

回复 引用 查看

#5楼 2010-12-11 10:29 漫漫江雪

真好,比起那种富编辑器应该会好多了,

以前用了下dotnettextbox,页面就一编辑器 查看源码,滚动条都还要下拉,太多了

回复 引用 查看

#6楼 2011-01-09 18:00 mydreams

请教下,

为什么我引用了之后在点击上传图片或者flash后一直显示是在加载中呢?

回复 引用 查看

#7楼 2011-01-30 14:43 rainr

不错,支持国产~~!

注册用户登录后才能发表评论,请 登录 或 注册,返回博客园首页

首页博问闪存新闻园子招聘知识库

最新it新闻:

·ios 5.1 beta3文件预示未来 siri有可能支持 ipad和 ipod touch

·android平台12月广告浏览份额51.6% 超越ios

·测试版ios源代码显示ipad 3或将支持siri

·斯蒂芬·霍金的新电脑

·京东商城2.95亿竞得北京商业地一块

» 更多新闻...

最新知识库文章:

·javascript 面向对象编程

·持续集成之“everything is code”

·持续集成之“软件自我识别”

·持续集成之戏说check-in dance

·什么是闭包。
       我的理解

» 更多知识库文章...

china-pub 2011秋季教材巡展

china-pub 计算机绝版图书按需印刷服务


======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值