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

最新推荐文章于 2024-07-24 16:53:23 发布

javazhuanzai

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量645

点赞数

分类专栏： javame 文章标签：文本编辑 html string fckeditor asp.net upload

javame 专栏收录该内容

832 篇文章 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("");

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'即可。

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