CKEditor是继承FCKEditor的一款非常优秀的Html编辑器。借助JSON,CKEditor具有非常强大的扩展能力。下面我就接合一个实际的例子为大家展示一下它的这种能力。问题:CKEditor工具栏上有一个Image按钮,是为内容添加图片。但是默认情况下对话框只提供了一个插入image URL的文本框。如果要从本地上传图片,官方的推荐做法是配合CKFinder。网上有很多这方面的示例,我这里就不多说了。不过CKFinder有三点让我不满意的地方:一是它在允许你上传文件的同时会把服务器上的文件显示出来,这可让我不爽。二是不同的后台技术需要配合相应的CKFinder--PHP,ASP.net,JAVA等。这让已经有上传管理的系统进行整合不方便。三是CKFinder是进行文件处理,如果我想进行数据库的处理--用户upload的图片存到数据库中,然后从数据库中读取图片放在编辑器里就没办法了。
目标:所以我希望在插入image对话框的URL文本框的旁边放一个我自己的Upload按钮,点击后页面转入我自己定义的文件/图片上传页面,接下来我自己处理upload的整个过程。最后返回一个url,通过这个url可以看到图片(可能是个动态页面,比如aspx文件,通过参数从数据库里取出图片)
实现:这样的目标在以前是需要通过更改源代码来实现,但现在不需要了,借助CKEditor强大的扩展能力,我们完全可以以javascript实现这一目标。以下是代码:
function addUploadButton(editor){
CKEDITOR.on('dialogDefinition', function( ev ){
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'image' ){
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.add({
type : 'button',
id : 'upload_image',
align : 'center',
label : 'upload',
onClick : function( evt ){
var thisDialog = this.getDialog();
var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl');
var txtUrlId = txtUrlObj.getInputElement().$.id;
addUploadImage(txtUrlId);
}
}, 'browse'); //place front of the browser button
}
});
}function addUploadImage(theURLElementId){
var uploadUrl = "..."; //这是我自己的处理文件/图片上传的页面URL
var imgUrl = window.showModalDialog(uploadUrl);
//在upload结束后通过js代码window.returnValue=...可以将图片url返回给imgUrl变量。
//更多window.showModalDialog的使用方法参考
//http://blog.csdn.net/jrq/archive/2010/01/27/5259946.aspx
var urlObj = document.getElementById(theURLElementId);
urlObj.value = imgUrl;
urlObj.fireEvent("onchange"); //触发url文本框的onchange事件,以便预览图片
}
只要将这段代码放到页面onload事件中,比如放在CKEDITOR.replace()后面,就可以了。说明:CKEditor的扩展基本上都是通过on方法实现的。on方法有2个参数,第一个是CKEditor内部的各种事件名称,类似一个钩子。第二个参数是要扩展的代码,通常是一个js函数。因为我们要改动的是image对话框,所以对应的事件名称是dialogDefinition,对话框的名字是image。image url文本框在info选项卡内,通过getContents('info')定位到该选项卡,然后通过infoTab.add()方法就可以在选项卡内添加新的元素了。元素定义是JSON格式。我们这里定义了一个button,其中包括标签(label)和点击(onClick)以后要执行的动作(通常也是个js函数)。infoTab.add()第二个参数是用来指定新元素的位置-在该元素之前。如果不提供这个参数则新元素放在选项卡最后。我们在这里将这个新的Upload按钮放在CKEditor默认的browser按钮前面。
upload按钮点击后就是进行upload动作。这个是通过addUploadImage()完成的。该函数接受一个id参数,用来指定upload完成后图片的url返回给哪个表单元素。通过查看源代码可知图片URL文本框的id是txtUrl,但该id是CKEditor自己内部的id,不是页面上最终生成的HTML的id。不过CKEditor也提供了方法getContentElement()和getInputElement()进行2者的转换。
addUploadImage函数内容也很简单,先指定我自己的文件上传页面的URL,然后在一个模态窗口中打开这个页面,处理文件上传的所有细节。最终的结果是将图片上传后在服务器上的URL地址返回给一个变量imgUrl。最后把这个变量赋值给传进来的图片URL文本框里。最后手工触发一下onchange事件,这样在image对话框里就能看到图片的预览效果了。
目标:所以我希望在插入image对话框的URL文本框的旁边放一个我自己的Upload按钮,点击后页面转入我自己定义的文件/图片上传页面,接下来我自己处理upload的整个过程。最后返回一个url,通过这个url可以看到图片(可能是个动态页面,比如aspx文件,通过参数从数据库里取出图片)
实现:这样的目标在以前是需要通过更改源代码来实现,但现在不需要了,借助CKEditor强大的扩展能力,我们完全可以以javascript实现这一目标。以下是代码:
function addUploadButton(editor){
CKEDITOR.on('dialogDefinition', function( ev ){
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'image' ){
var infoTab = dialogDefinition.getContents( 'info' );
infoTab.add({
type : 'button',
id : 'upload_image',
align : 'center',
label : 'upload',
onClick : function( evt ){
var thisDialog = this.getDialog();
var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl');
var txtUrlId = txtUrlObj.getInputElement().$.id;
addUploadImage(txtUrlId);
}
}, 'browse'); //place front of the browser button
}
});
}function addUploadImage(theURLElementId){
var uploadUrl = "..."; //这是我自己的处理文件/图片上传的页面URL
var imgUrl = window.showModalDialog(uploadUrl);
//在upload结束后通过js代码window.returnValue=...可以将图片url返回给imgUrl变量。
//更多window.showModalDialog的使用方法参考
//http://blog.csdn.net/jrq/archive/2010/01/27/5259946.aspx
var urlObj = document.getElementById(theURLElementId);
urlObj.value = imgUrl;
urlObj.fireEvent("onchange"); //触发url文本框的onchange事件,以便预览图片
}
只要将这段代码放到页面onload事件中,比如放在CKEDITOR.replace()后面,就可以了。说明:CKEditor的扩展基本上都是通过on方法实现的。on方法有2个参数,第一个是CKEditor内部的各种事件名称,类似一个钩子。第二个参数是要扩展的代码,通常是一个js函数。因为我们要改动的是image对话框,所以对应的事件名称是dialogDefinition,对话框的名字是image。image url文本框在info选项卡内,通过getContents('info')定位到该选项卡,然后通过infoTab.add()方法就可以在选项卡内添加新的元素了。元素定义是JSON格式。我们这里定义了一个button,其中包括标签(label)和点击(onClick)以后要执行的动作(通常也是个js函数)。infoTab.add()第二个参数是用来指定新元素的位置-在该元素之前。如果不提供这个参数则新元素放在选项卡最后。我们在这里将这个新的Upload按钮放在CKEditor默认的browser按钮前面。
upload按钮点击后就是进行upload动作。这个是通过addUploadImage()完成的。该函数接受一个id参数,用来指定upload完成后图片的url返回给哪个表单元素。通过查看源代码可知图片URL文本框的id是txtUrl,但该id是CKEditor自己内部的id,不是页面上最终生成的HTML的id。不过CKEditor也提供了方法getContentElement()和getInputElement()进行2者的转换。
addUploadImage函数内容也很简单,先指定我自己的文件上传页面的URL,然后在一个模态窗口中打开这个页面,处理文件上传的所有细节。最终的结果是将图片上传后在服务器上的URL地址返回给一个变量imgUrl。最后把这个变量赋值给传进来的图片URL文本框里。最后手工触发一下onchange事件,这样在image对话框里就能看到图片的预览效果了。
http://topic.csdn.net/u/20100127/11/d647019a-a823-4457-a287-72c6be87d9f1.html?76650
using System.Web;namespace me.common
{
/// <summary>
/// 在要引用的面页继承此类即可
/// </summary>
public partial class CkeditorUpfile : System.Web.UI.Page
{
public string msg = "文件上传"; protected override void OnInit(EventArgs e)
{
#region 权限验证部分
msg = ""; Boolean xiao = true;
String HTP = Convert.ToString(Request.Url);
String superadmin = Convert.ToString(Session["superadmin"]);
//if ((superadmin == null || superadmin == "") && ( HTP.IndexOf("localhost")==-1 && HTP.IndexOf("127.0.0.1")==-1 ))
if (superadmin == null || superadmin == "")
{
//Response.Redirect("../user/login.aspx?err=sessions&backurl=" + HTP + "");
msg = "你没有上传文件的权限";
msg += "<BR><BR><a href=/user/login.aspx?err=sessions&backurl=" + HTP + " target=_blank>请先登录</a>";
}
else
{
xiao = true;
}
//权限验证完成
#endregion
HttpPostedFile localFile = Request.Files["NewFile"];
#region 上传目录
String subDir = Convert.ToString(DateTime.Now.ToString("yyyyMM"));
subDir += "/" + Convert.ToString(DateTime.Now.ToString("dd"));
string BaseDir = "/upfiles/" + subDir; String updir = (string)Session["updir"]; if ((string.IsNullOrEmpty(updir)) != false)
{
BaseDir = "/" + updir + "/" + subDir;
} if (!System.IO.Directory.Exists(Server.MapPath(BaseDir)))
{ System.IO.Directory.CreateDirectory(Server.MapPath(BaseDir)); } #endregion if (xiao == true && localFile != null)
{
//string sUnsafeFileName = System.IO.Path.GetFileName(localFile.FileName);
//string sFileName = Regex.Replace(sUnsafeFileName, @"[\:\*\?\|\/]", "_", RegexOptions.None); string sExtension = System.IO.Path.GetExtension(localFile.FileName);
sExtension = sExtension.TrimStart('.');
string sFileName = Convert.ToString(DateTime.Now.ToString("HHmmssffff")) + "." + sExtension;//以时间格式重命名
string sFilePath = BaseDir + "/" + sFileName;
string localFileExtension = System.IO.Path.GetExtension(localFile.FileName);
if (localFile.ContentLength > 102400)
{
msg = "上传失败,文件大于 100KB ";
// ConnectorException.Throw(Errors.FileOver100KB);
//this.SendFileUploadResponse(1, true, "", "", "文件过大,请上传小于 100K 的 JPEG 或 GIF 图片。");
}
else if (localFileExtension != ".jpeg" && localFileExtension != ".jpg" && localFileExtension != ".gif")
{
msg = "类型文件不被接受";
}else
{
localFile.SaveAs(sFilePath); try
{
if (me.common.fileWater.IsAllowedExtension(sFilePath) == true)
{
me.common.fileWater.FileWater(sFilePath);
msg = "文件上传成功";
}
else
{
System.IO.File.Delete(sFilePath);
msg = "文件上传失败,类型不被接受";
// this.SendFileUploadResponse(1, true, "", "", "文件类型不正确,请上传小于 100KB 的 JPEG 或 GIF 图片。");
}
}
catch (Exception )
{
msg = "文件添加水印或验证类型时出错";
} }
}
}
}
}对应上述代码的上传载体(aspx页面)<%@ Page language="c#" Trace="false" Inherits="me.common.CkeditorUpfile" AutoEventWireup="false" ValidateRequest="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<head runat="server">
<title>九百游>文件上传</title>
<link href="/css/2.css" rel="stylesheet" type="text/css">
</head>
<body>
<BR /><BR />
<form id="form1" name="form1" method="post" target="_self" enctype="multipart/form-data">
<table width="500" border="0" align="center">
<tr>
<td width="80" height="40" class="dark">文件位置:</td>
<td width="404" height="40">
<label>
<input name="NewFile" type="file" class="noimgButton" />
</label> </td>
</tr>
<tr>
<td height="40"> </td>
<td height="40">
<label>
<input name="Submit" type="button" class="myButton" onclick="javascript:void(form1.submit())" value="确定上传"/>
</label> <input name="Submit2" type="button" onclick="returnfileurl()" class="Button9729" value="返回上页" /></td>
</tr>
</table>
</form>
<table width="500" border="0" align="center">
<tr>
<td height="59" valign="top" class="dark"><%=msg%></td>
</tr>
</table>
</body>
</html>
请问这里的图片的URL怎么得到?
3D Button Visual Editor是一个WYSIWYG(所见即所得)的应用程序,用户可以用它很快创建出色的3D按钮。使用这个强大的应用程序不需要任何图像处理技术,且使用方便,速度快具体功能: 专业网页设计师和业余网站维护人员:通常情况下,制作" 3D look "按钮需要昂贵和难用的图像应用程序,比如Macromedia Fireworks?或者 Adobe Photoshop?用这个工具为网站制作极好的3D按钮和导航栏,您会发现前所未有的简单和快速。
3D Button Visual Editor可以轻松用“双态”和“三态”的翻转效果管理按钮的收集和导航栏。如果有必要,您可以生成翻转HTML和JavaScript代码插入您的网页中。
制作的3D按钮的品质会为任何一个专业和个人网站的外观添彩,还可以节约很多的开发时间和资金。对按钮样板的支持可以帮您将创建的按钮保存下来,以便今后使用或改进。
软件开发人员:新一代“厚皮的”和“图像丰富的”软件不能够再使用过去的平面直角按钮。替代品使用专用软件(比如3D Active Button Magic ActiveX控件),或者用昂贵的图像应用程序设计位图,而这些应用程序的“学习曲线”往往比你开发代码的时间还要长。使用3D Button Visual Editor,制作按钮从一件痛苦的事情转变为了一种娱乐。您还可以节约很多时间,专心开发代码。用新版的应用程序,您可以创建具有现代渲染界面的出色的3D按钮,例如Aqua, Gel, Vista's "Aero", Office 2003, Office 2007等:请看下面一些小界面的样本:3D Button Visual Editor(专业版)可作为Microsoft FrontPage插件。3D Button Visual Editor还可以作为一些产品的“文本插件”,例如我们的合作伙伴Visual Vision开发的EasyWebEditor。