CKEditor功能扩展示例－－为image对话框添加自己的upload按钮

[wxt]

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对话框里就能看到图片的预览效果了。

[sohighthesky]

sf，再看

[wxt]

抢沙发够快的。

[wxt]

看点是完全没有改动CKEditor的源代码。对CKEditor的扩展完全是非侵入式的。

[uddwfn521]

藏之

[wxt]

又写了一篇，介绍怎么为CKEditor添加Readonly按钮。地址是
http://topic.csdn.net/u/20100127/11/d647019a-a823-4457-a287-72c6be87d9f1.html?76650

[rocdream]

不错不错，正在找这方面的资料，我想将单行文本的名称输入框改为下拉框，下拉框数据是从数据库取的，还不知道怎么弄，请楼主赐教啊

[rocdream]

就是，ckeditor的form表单输入那块，有checkboc 有radio等等，其中的那个文本输入框的属性啊，点击后弹出对话框，就像你说的那个点击弹出图片对话框一样啊，第一个就是设置这个文本输入框的名称啊 呵呵

[rocdream]

其实说简单点就是我想把编辑器中一个输入框变成下拉框，

[wxt]

什么叫"单行文本的名称输入框"？

[Javacloud]

晕死，不行啊

[xiehongan123]

没有干货啊

[D80000]

楼主还关注此贴么。。。

偶试了下出问题了。。。CKEDITOR3.3

指定自己的上传页为/upfiles/ckeditorUp.aspx （单独测试这个页面没有任何问题），但用楼主的那个JS代页弹出这个上传页进行操作时出问题了，这个页面有个上传文件提交按钮，一点这个提交按钮就会弹出一个空白的页面。。。。无法进行上传等后续操作。。

以下是源码

上传页（不会网站一起，单独打包成DLL）

using System;
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>

[java_4_ever]

用CKEditor 3.3 试了楼主的方法 还是不行啊 苦恼中 根本没显示添加图片之类的按钮

[D80000]

楼主不在了呀。。。。。实在不行，只能改CK的图片上传HTML，手动添加按钮，绑定自定义AJAX事件调用上传窗口完成上传了。。。

[JJTwo]

用 servletFileUpload.parseRequest(request); 获取不到文件？？？

[agonimaple]

var uploadUrl = "..."; //这是我自己的处理文件/图片上传的页面URL
请问这里的图片的URL怎么得到？

[mciiv]

将这个新的Upload按钮放在CKEditor默认的browser按钮前面的话好像不对齐，挺难看的，建议将‘browse’改成‘txtAlt’吧‘~这样好点

[qthl006]

楼主说的是这款软件么


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。