java与ckeditor和ckfinder整合后实现上传图片功能

合集下载

富文本编辑器(Ckeditor+Ckfinder)实现富文本编辑和图片文件的上传的配置方法

Ckeditor+Ckfinder在实现富文本编辑和图片文件的上传的配置方法一、下载Ckeditor和Ckfinder。

（一）百度搜索Ckeditor和Ckfinder，点击排名第一的网站。

（二）在其官方网站的download和free trial栏目下载免费的文件包。

注意要选择二、解压缩文件并选择加入网站所需的文件夹。

1.复制ckeditor的_Samples文件夹下的bin和ckeditor两个文件2.复制cfinder整个文件夹，并将bin/release文件夹下的dll文件复制到富文本编辑器的bin文件里。

注意这里就有两个dll文件了。

整理的结果如下：最后将文件夹拷贝到网站根目录下：二、配置ckeditor和ckfinder1.添加对两个bin文件夹下dll文件的引用2.在工具箱加入ckeditor控件，选择选择项。

在选择工具箱.netFramework组件中浏览选择bin文件夹中的.dll文件，工具箱将会多出一个CKEditorControl控件。

2.在需要使用富文本编辑器的网页中加入CKEditorControl 控件。

在属性窗口输入都要ckfinder文件浏览和上传功能的管理页面，包括浏览服务器和上传两个功能。

注意目录一定要正确FilebrowserBrowseUrl="../fwh_new_bjq/ckfinder/ckfinder.html?Type=Files" FilebrowserFlashBrowseUrl="../fwh_new_bjq/ckfinder/ckfinder.html?Type=Flash" FilebrowserImageBrowseUrl="../fwh_new_bjq/ckfinder/ckfinder.html?Type=Images"FilebrowserFlashUploadUrl="../fwh_new_bjq/ckfinder/core/connector/aspx/connector.aspx?comman d=QuickUpload&type=Flash"FilebrowserImageUploadUrl="../fwh_new_bjq/ckfinder/core/connector/aspx/connector.aspx?comman d=QuickUpload&type=Images"FilebrowserUploadUrl="../fwh_new_bjq/ckfinder/core/connector/aspx/connector.aspx?command=Qui ckUpload&type=Files"选择/ckfinder/config.ascx文件，修改授权规则和上传目录。

ckEditor支持上传(ckEditor+ckFinder)

ckEditor+ckFinder整合实现上传功能1.去/download/download下载ckEditor和ckFinder，因为公司项目基本是java项目所以下载java版本例如：ckeditor-java-3.6.2.zip，ckfinder_java_2.3.zip2.加压下载后的压缩包：Ckeditor压缩包中的ckeditor文件夹拷入项目根目录中，Ckfinder压缩包中\ckfinder_java_2.3\ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp的ckfinder文件夹拷入项目根目录中。

3.项目中引用所需JAR包:Ckeditor压缩包中\WEB-INF\lib文件夹下的ckeditor-java-core-3.5.3.jar Ckfinder压缩包解压后有一个CKFinderJava.war文件，接着解压CKFinderJava.war，找到\WEB-INF\lib文件夹下的CKFinder-2.3.jar，CKFinderPlugin-FileEditor-2.3.jar，CKFinderPlugin-ImageResize-2.3.jar，commons-fileupload-1.2.2.jar，commons-io-2.0.1.jar，thumbnailator-0.4.2.jar 将这7个包拷入项目的\WEB-INF\lib文件夹下。

4.页面引用js：<script type="text/javascript" src="/ckeditor/ckeditor.js"></script><script type="text/javascript" src="/ckfinder/ckfinder.js"></script>5.绑定页面中的textarea：$(function(){var editor = CKEDITOR.replace('mailContents');CKFinder.setupCKEditor(editor,'/ckfinder/');});函数中的mailContents为textarea的name属性值/ckfinder/为ckfinder的项目路径6.配置文件：在第三步解压的CKFinderJava文件夹的WEB-INF找到config.xml修改第二行的<enabled>false</enabled>为<enabled>true</enabled>设置启用上传功能，修改第四行的<baseURL>/CKFinderJava/userfiles/</baseURL>把红色部分改为项目保存上传文件的文件夹，保存后放入项目的WEB-INF文件夹下。

java使用CKEditor实现图片上传功能

java使⽤CKEditor实现图⽚上传功能java如何使⽤CKEditor实现图⽚上传功能，具体内容如下1.根据实际需要下载指定的CKEditor2.删除⽂件ckeditor/plugins/image/dialogs/image.js预览框中⽂本内容，并修改hidden属性值为显⽰上传选项卡删除image.js中包含在双引号中的上述⽂本将image.js中的hidden属性值改为03.修改ckeditor/config.js⽂件，配置“上传到服务器”按钮调⽤的controller接⼝4.“上传到服务器”按钮调⽤的controller级别的接⼝@Controller@RequestMapping("publicutil")public class PublicUtilController {@RequestMapping(value = "uploadImage")private void uploadImage(HttpServletRequest request, HttpServletResponse response, HttpSession session,@RequestParam MultipartFile[] upload) { response.setCharacterEncoding("UTF-8");PrintWriter out=null;try {out = response.getWriter();} catch (IOException e1) {logger.error("response.getWriter()异常="+e1);e1.printStackTrace();}String callback = request.getParameter("CKEditorFuncNum");// 获得response,requestMap<String, Object> m = new HashMap<String, Object>();if (!ServletFileUpload.isMultipartContent(request)) {m.put("error", 1);m.put("message", "请选择⽂件!");//return m;("请选择⽂件!");}String originalFileName=null;//上传的图⽚⽂件名String fileExtensionName=null;//上传图⽚的⽂件扩展名for (MultipartFile file : upload) {if (file.getSize()> 10*1024* 1024) {out.println("<script type=\"text/javascript\">");out.println("window.parent.CKEDITOR.tools.callFunction(" + callback+ ",''," + "'⽂件⼤⼩不得⼤于10M');");out.println("</script>");}originalFileName=file.getOriginalFilename();("上传的图⽚⽂件名="+originalFileName);fileExtensionName= originalFileName.substring(stIndexOf(".") ,originalFileName.length()).toLowerCase();("图⽚⽂件扩展名="+fileExtensionName);String[] imageExtensionNameArray= WebsiteConstant.IMAGE_EXTENSION_NAME_ARRAY;String allImageExtensionName="";boolean isContain=false;//默认不包含上传图⽚⽂件扩展名for(int i=0;i<imageExtensionNameArray.length;i++){if(fileExtensionName.equals(imageExtensionNameArray[i])){isContain=true;}if(i==0){allImageExtensionName+=imageExtensionNameArray[i];}else{allImageExtensionName+=" , "+imageExtensionNameArray[i];}}String newFileName=java.util.UUID.randomUUID().toString()+fileExtensionName;String uploadPath =WebsiteConstant.PIC_APP_FILE_SYSTEM_CKEDITOR_LOCATION;if(isContain){//包含File pathFile = new File(uploadPath);if (!pathFile.exists()) { // 如果路径不存在，创建pathFile.mkdirs();}try {FileUtils.copyInputStreamToFile(file.getInputStream(), new File(uploadPath ,newFileName));// InputStream is=file.getInputStream();// File toFile = new File(uploadPath, newFileName);// OutputStream os = new FileOutputStream(toFile);// byte[] buffer = new byte[1024];// int length = 0;// while ((length = is.read(buffer)) > 0) {// os.write(buffer, 0, length);// }// is.close();// os.close();} catch (IOException e) {logger.error("FileUtils.copyInputStreamToFile uploadPath="+uploadPath+" newFileName ="+newFileName+" exception="+e);}String imageUrl=WebsiteConstant.PIC_APP_SERVER_URL+"images/ckeditor/"+newFileName;// 返回"图像信息"选项卡并显⽰图⽚ ,在对应的⽂本框中显⽰图⽚资源urlout.println("<script type=\"text/javascript\">");out.println("window.parent.CKEDITOR.tools.callFunction(" + callback+ ",'" +imageUrl + "','')");out.println("</script>");}else{out.println("<script type=\"text/javascript\">");out.println("window.parent.CKEDITOR.tools.callFunction(" + callback+ ",''," + "'⽂件格式不正确（必须为"+allImageExtensionName+"⽂件）');");out.println("</script>");}}}}<span style="font-size:14px;">public class WebsiteConstant {public static String[] IMAGE_EXTENSION_NAME_ARRAY={".jpg",".jpeg",".png",".gif",".bmp"};public static String PIC_APP_SERVER_URL="http://localhost:8090/Picture/";public static String PIC_APP_FILE_SYSTEM_CKEDITOR_LOCATION="/Users/abc/Documents/tomcat/webapps/Picture/images/ckeditor/"; public static final int SUCCESS = 1; // 操作成功</span>5.若是在Maven项⽬中使⽤的CKEditor，需要在pom.xml中添加如下代码：<dependency><groupId>com.ckeditor</groupId><artifactId>ckeditor-java-core</artifactId><version>3.5.3</version></dependency>6.最终效果图以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

如何实现ckeditor文件上传

如何实现ckeditor文件上传如何实现ckeditor文件上传想把java web项目中的fckeditor在线文本编辑器升级到ckeditor，但又不想购买ckfinder 来实现文件上传？老k将告诉你一个不用花钱就可以实现ckeditor上传文件的好方法，只要对fckeditor 的filem anager做出几处修改，就可以集成fckeditor的文件上传管理器到ckeditor 中使用，可以方便在文章中插入图片及flash。

1.在java web项目中集成fckeditor如果你是把fckeditor升级到ckeditor的话，可以跳过这一步，否则请下载fckeditor的最终版本，然后把fckeditor文件夹复制到java web项目的webroot目录下。

当然，你可以直接下载本文的示例项目fckeditro文件上传管理器集成到ckeditor示例项目(0)来获得最终版本的fckeditor，而且是已经可以集成到ckeditor的fckeditor。

2.把java实现文件上传需要的jar复制到项目lib目录下下载本文的示例项目后解压，把项目lib目录下的所有jar文件复制到你的项目的lib下面，如果不是通过myeclipse或者eclipse进行粘贴的话，你还需要把这些jar加入到项目编译路径下。

3.重写fckeditor实现文件上传的ConnectorServlet以解决中文乱码的问题你可以直接到本文示例项目okboke.servlet目录下的ConnectorServlet.java复制到你的项目的src目录下。

4.实现fckeditor的erActionImpl其实只需要把fckeditor.properties文件复制到你项目的src目录下就可以了5.配置你的web.xml文件配置上传文件的servlet，使tom cat启动的时候就加载该servlet，在web.xml中加入以下的代码：Connectorokboke.servlet.ConnectorServlet。

ckeditor协同kcfinder实现图片的远程管理和图文并茂的内容发布

Ckeditor kcfinder 整合配置：Ckeditor ---- 强大的富文本编辑器官方推出了ckfinder 在线文件管理模块配合，但是该模块并不是和ckeditor一样开源免费使用；不过还好有另外一款文件管理器可与其配合使用，实现你想要的功能，即：kcfinder。

这是其他组织开发的远程文件管理模块，可以用它来协同ckeditor 做文件上传、实现图文并茂的文章发布和远程管理文件资源的操作。

网上下载ckeditor 和kcfinder 的php版本，将两者放到你规划好的同一目录下，配置ckeditor :修改config.js，添加如下配置项：_++++++++++++++++++++++++++++++++++++++++++++++++++++++++ //kcfinder 文件在线浏览的urlconfig.filebrowserBrowseUrl = '/admin/kcfinder/browse.php?type=files';//kcfinder 在线浏览图片资源的urlconfig.filebrowserImageBrowseUrl = '/admin/kcfinder/browse.php?type=images';//kcfinder 在线浏览flash文件的urlconfig.filebrowserFlashBrowseUrl = '/admin/kcfinder/browse.php?type=flash';//ckeittor 文件上传提交的urlconfig.filebrowserUploadUrl = '/admin/kcfinder/upload.php?type=files';//ckeittor 上传图片的urlconfig.filebrowserImageUploadUrl = '/admin/kcfinder/upload.php?type=images';//ckeittor 上传flash的urlconfig.filebrowserFlashUploadUrl = '/admin/kcfinder/upload.php?type=flash';cfinder/config.php里，把uploadURL配置成你自己的上传总目录的URL，比如：/uploads.把uploadDir配置成你自己的上传相对目录（相对于kcfinder/config.php的目录），比如：../../../../uploads/.++++++++++++++++++++++++++++++++++++++++++++++++++++++++++经过以上配置，可以在ckeditor 的工具栏里边的图像工具和flash工具里边看到多了客户端本地文件上传到服务器的菜单项，但是此时上传会出问题，还需配置kcfinder 正确响应ckeditor的操作请求，以及配置正确的上传文件保存路径：修改kcfinder 的配置文件config.php 里边有两个地方需要更改：一是添加权限限制，不能谁谁都可以向你服务器上传东西：比如我的一个小应用-----文章发布系统的后台，我在config.php文件的最顶部加入：+++++++++++++++++++++++++++++++++++++++++++++++++++++++session_start();if(!empty($_SESSION['USERNAME'])&&!empty($_SESSION['PASSWORD'])){ $_SESSION['KCFINDER']['disabled'] = false;}else{echo "<script>top.location.href='../login.php';</script>";}++++++++++++++++++++++++++++++++++++++++++++++++++++++++以上代码主要是判断用户是否登录，登录的话让kcfinder 的$_SESSION['KCFINDER']['disabled'] = false;//就是启用kcfinder反之就跳转到登录页面登录；配置如下：（配置数组方式）//不允许上的传文件类型限制'deniedExts' => "exe com msi bat php phps phtml php3 php4 cgi pl",'maxImageWidth' => 0, //图片最大宽度'maxImageHeight' => 0,//图片最大高度'thumbWidth' => 100,//缩略图的最大宽'thumbHeight' => 100, //缩略图的最大高'jpegQuality' => 90, //图片质量//上传文件保存路径配置：'uploadURL' => "../upload/",以上是一些基本配置，之后kcfinder 就可以一ckeditor模块的方式协同ckeditor 来做文件上传、实现图文并茂的文章发布和远程管理文件资源的操作。

ckeditor与ckfinder整合forJAVA(解决乱码问题)

ckeditor + ckfinder整合for JA V A---支持文件上传、解决乱码问题2012-07-18备注：本人使用的开发工具为eclipse 3.7.0，服务器为：apache-tomcat-7.0.20，jdk版本为：jdk1.6.0_29。

本人已使用了字符过滤器，所有的字符都设置为UTF-8。

仅供参考。

一．简谈：前期（2012-06-20）本人根据网上一些资料，以及个人的实现，发布了“ckeditor + ckfinder整合for JA V A（支持文件上传）”文档，收到了很多网友的私信，并进行了交流。

在此感谢那些交流过的网友。

网上大多数的资料都是相对比较老的版本，所以本人花了一些时间写下了ckeditor 和ckfinder整合。

但由于本人只是简单的应用，所以没有整合的很充分，部分功能没有全部去实现，如文件夹重命名、文件夹新建、上传文件时文件带有汉字等乱码问题没有解决，先作补充如下（请先阅读前期材料）。

二．“错误”的出现当前期准备完成后，我们开始操作图片、文档、flash的上传了，但是这时你会发现，当上传文件名为汉字，后者新建文件夹，或者重命名文件夹的时候，如果使用中文会出现乱码，导致文件、文件夹无法访问。

操作如下：打开上传页面，选择Files--创建子文件夹，如下图所示：输入“我们”，如下图所示：选择“确定”，出现如下情况：同理，当文件夹重命名带汉字，上传图片时文件名带汉字也会出现类似的情况。

三．问题的解决先解决方法如下：找到程序运行的服务器（tomcat），下的server.xml文件用记事本打开找到如下段落，如下图所示：修改为如下图所示区域：<Connector port="8080" protocol="HTTP/1.1"connectionTimeout="20000"redirectPort="8443"URIEncoding="UTF-8" />注意大小写问题。

ckeditor组合ckfinder的配置使用图片上传功能

CKFinder 的使用准备工作1. 下载CKFinder的版，将其解压到Web根目录下2. 复制/bin/Release目录下的ckfinder.dll文件至站点bin目录3. 精简目录：_samples文件夹（示例文件，可以删除）_source文件夹（源程序文件，可以删除）CKFinder的配置1. 打开” \ckfinder\config.ascx “，为SetConfig方法中的BaseUrl 指定默认路径湘潭网站建设，如：// 以userfiles 为默认路径，其目录下会自动生成images、flash等子目录。

BaseUrl = ” ~/ckfinder/userfiles/”;// NOTE：注意“ ~/ ”。

2. 与CKEditor集成打开CKEditor目录中的config.js文件在function 函数中复制代码代码如下:// 自定义CKEditor 样式CKEDITOR.editorConfig = function(config) {……};加入如下内容：复制代码代码如下:// 在CKEditor 中集成CKFinder，注意ckfinder 的路径选择要正确。

config.filebrowserBrowseUrl = location.hash + …/ckfinder/ckfinder.html‟;config.filebrowserImageBrowseUrl = location.hash +…/ckfinder/ckfinder.html?Type=Images‟;config.filebrowserFlashBrowseUrl =location.hash+‟/ckfinder/ckfinder.html?Type=Flash‟;config.filebrowserUploadUrl = location.hash +…/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Fil es‟;config.filebrowserImageUploadUrl = location.hash +…/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Im ages‟;config.filebrowserFlashUploadUrl = location.hash +…/ckfinder/core/connector/aspx/connector.aspx?command=QuickUp load&type=Fla sh‟;// config.filebrowserWindowWidth = ‟800′;// config.filebrowserWindowHeight = ‟500′;CKFinder的应用1. 在工具栏中添加站点根目录bin目录中的ckfinder.dll控件2. 拖放控件到Web页面3. 修改CKFinder控件属性BasePath为ckfinder目录的相对路径常见问题1. 症状：因为安全原因，文件不可浏览。

CKeditor+CKFinder使用说明

效果图：
使用方法：
1.首先通过浏览的方式导入CKeditor.dll,导入完成之后再工具栏中会出现
这样一个工具
2.新建一个测试页面ToUseCkeditor.aspx，将该工具拉入页面中如下图所示
3.将ckeditor和ckfinder两个文件夹拷贝到项目的根目录下面，如下图所示
4.在引用中要添加CKFinder.dll的引用
5.Ckeditor文件夹下面的config.js文件用来配置编辑器的一些属性，详细如下，不进行配
置就表示使用CKeditor默认的属性
6.CKFinder文件夹下的config.ascx文件可以用来配置文件上传的路径等信息，如果不进行
自定义的配置则使用默认的路径（/ckfinder/userfiles/），如下图所示
7.配置完成，可以正确使用。

CKEditor + CKFinder 配置

CKEditor + CKFinder 配置2010年04月21日星期三 23:14CKEditor：1.解压CKEditor到webRoot目录，在应用页面加载其ckeditor.js ;2.页面textarea：<textarea cols=”80″; name=”editor1″ rows=”10″></textarea>CKFinder：3.解压CKFinder到webRoot目录（最好与CKEditor同级），在应用页面加载其ckfinder.js ;4.页面script：（最好textarea之后）if (typeof CKEDITOR == ‘undefined’) {document.write(’加载CKEditor失败’);}else {var editor = CKEDITOR.replace(’editor1′);CKFinder.SetupCKEditor(editor, ‘../ckeditor/ckfinder/’); //ckfinder 总目录的相对路径.}整合：（把俩js加载到同一文件其实就已经基本整合好了，还需要修改的配置如下）5.打开\ckfinder\config.php，修改$baseUrl = ‘（上传附件的存放路径）’; //以webRoot为起始的绝对路径，其目录下会自动生成images、flash等子目录；默认是在webRoot的根目录下，注意修改。

至此配置完毕，如果需要自定义界面，可进行以下的高级修改：6.在ckeditor\config.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码：//字体.config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial; Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;';//工具按钮.config.toolbar=[['Source','-','Save','NewPage','Preview','-','Templates'],['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFo rmat'],['Form','Checkbox','Radio','TextField','Textarea','Select','B utton','ImageButton','HiddenField'],'/',['Bold','Italic','Underline','Strike','-','Subscript','Supers cript'],['NumberedList','BulletedList','-','Outdent','Indent','Blockq uote'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] ,['Link','Unlink','Anchor'],['Image','Flash','Table','HorizontalRule','Smiley','SpecialCh ar','PageBreak'],'/',['Styles','Format','Font','FontSize'],['TextColor','BGColor'],['Maximize','ShowBlocks','-','About']];//宽度config.width = 500;//高度config.height = 400;//皮肤config.skin='v2';安装CKFinder后才能有上传功能:第二步：设置CKFinder的上传功能由于本次CKEditor全新改版，没有提供文件上传功能，所以选择整合CKFinder 是个不错的选择需要修改一下CKEditor插件文件夹下的JS源码，以image插件为例（Flash及Files同理）：Code//将下边的代码做一些修改//{type:'button',id:'browse',align:'center',label:mon.brows eServer,hidden:false,filebrowser:'info:txtUrl'}]}]},//2009-07-13 将浏览服务器按钮置为显示状态（hidden: false）,增加onClick 函数，用于打开ckfinder页面,紧接着上面的代码添加{ type: 'button', id: 'browse', align: 'center', label:mon.browseServer, hidden: false, filebrowser: 'info:txtUrl', onClick: function() { var finder = new CKFinder(); finder.BasePath = '../ckfinder20090716/'; finder.SelectFunction = SetFileField;finder.Popup(); } }]}]},在方法体外增加下边的函数//用于取回 ckfinder 返回的图片地址并对路径文本框和预览图片进行赋值function SetFileField(fileUrl){//获取主Div下的所有文本框控件var inputStr =document.getElementById("cke_txtContent_dialog").getElementsByTagName ("Input");for(var i=0; i<inputStr.length; i++){if(inputStr[i].type=="text"){//第一个输入框控件是图像路径，得到ID，设置新的图片路径CKEDITOR.document.getById(inputStr[i].id).setValue(fileUr l);break ;}}CKEDITOR.document.getById('previewImage').setAttribute('src', decodeURI(fileUrl));}第三步：CKFINDER上传问题：出现“因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“整合后会出现“因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“The Solution:1. There is no write access for the default upload folder $baseUrl = '/userfiles/'; in ckfinder/config.php.对于目标文件夹$baseUrl = '/userfiles/';没有写入权限2. This is maybe because the Return value of Funcation CheckAuthentication() is always FALSE by default in ckfinder/config.php. Change the Validation Condition according to your condition, not recommend to set the return value to true directly.因为出于安全考虑ckfinder/config.php文件中的CheckAuthentication()函数默认返回值是false, 需要手动修改验证条件, 不建议直接返回true好了，最后一步了，由于ckfinder不是免费的，所以默认情况下会在上传页面中有红色的广告提示，虽然不影响使用，但总是觉得不爽。

CKEditor多图片上传插件（一）（二）

的内容：启程上文，我们继续来讲如何在CKEditor中添加多图片上传控件。

我们先贴一张最终的演示图给大家看一下：点击CKEditor上的上传多图片按钮，就会弹出这个对话框，这里我们使用的是UEditor中的多图片上传控件。

如何实现呢，其实就是从UEditor中把这块扣出来单用了。

我们来贴一下iframe下的页面吧：[html]view plaincopy1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"2. "http://www.w/TR/html4/loose.dtd">3. <html>4. <head>5. <title></title>6. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>7. <link rel="stylesheet" href="image.css" type="text/css"/>8. <script type="text/javascript" src="/js/login/jquery-1.7.2.min1c6c0c.js"></script>9. <script type="text/javascript" src="Default.js"></script>10. <style type="text/css">11. body{ font-size:12px; font-family:微软雅黑;}12. .up_tit{ width:620px; line-height:30px; display:table; height:30px; background-color:#ccc;}13. .up_ddl{ float:left;}14. .up_ddl div{ display:inline-block;}15. .up_sy{ float:right;}16. #updisable{ color:#666;}17. #upload {18. cursor: pointer;19. float: right;20. height: 30px;21. margin: 3px 6px 0 0;22. width: 100px;23. }24. </style>25.26. </head>27. <body>28. <div class="wrapper">29. <div id="imageTab">30. <div id="tabHeads" class="tabhead">31. <span tabSrc="local"><var id="lang_tab_local"></var></span>32. </div>33. <div id="tabBodys" class="tabbody">34. 35. <input id="curCount" name="curCount" type="hidden" value="0" />36. <div class="panel" id="local" style="z-index: 200;">37. <div id="flashContainer">38. <object width="608" height="272" align="middle" id="flash"39. codebase="/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"40. classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">41. <param value="window" name="wmode">42. <param value="imageUploader.swf" name="movie">43. <param value="container=flashContainer&url=/imageUp.jsp&ext=%7B%22fileNameFormat%22%3A%22%7Btime%7D%7Brand%3A6%7D%22%7D&fileType=%7B%22description%22%3A%2244. name="flashvars">45. <embed width="608" height="272" align="middle"46. pluginspage="/go/getflashplayer"47. type="application/x-shockwave-flash" name="flash" src="imageUploader.swf"48. flashvars="container=flashContainer&url=/imageUp.jsp&ext=%7B%22fileNameFormat%22%3A%22%7Btime%7D%7Brand%3A6%7D%22%7D&fileType=%7B%22description%22%3A%22%49. ver="10.0.0" wmode="window" errormessage="Flash插件初始化失败，请更新您的FlashPlayer版本之后重试！">50. </object>51. </div>52. <div><div style="background: url('images/upload.png') repeat scroll 0% 0% transparent;" id="upload"></div><div id="duiqi" style="background: url('images/imglabel.png') no-repeat scroll -12px 2px tran53. </div>54. </div>55. </div>56. </div>57. <script type="text/javascript">58. $(function(){59. var ci = "#localFloat";60. var floatContainer = $(ci),61. nameMaps = {"none":"默认", "left":"左浮动", "right":"右浮动", "center":"居中"};62. for (var j in nameMaps) {63. var div = document.createElement("div");64. div.setAttribute("name", j);65. if (j == "none") div.className = "focus";66.67. div.style.cssText = "background:url(images/" + j + "_focus.jpg);";68. div.setAttribute("title", nameMaps[j]);69. floatContainer.append(div);70. }71. switchSelect(ci);72. });73. /**74. * 选择切换，传入一个container的ID75. * @param selectParentId76. */77. function switchSelect(selectParentId) {78. var select = $(selectParentId);78. var select = $(selectParentId);79. select.on("click", function (evt) {80. var tar = evt.srcElement || evt.target;81. select.children().attr("class","");82. tar.className = "focus";83. parent.duiqi = tar.getAttribute("name");84. });85. }86. </script>87. </body>88.89. </html>再来看一下Default.js文件：[javascript]view plaincopy1. parent.imgs = new Array();2. /***********************Flash事件*****************************/3. /**4. * 检查flash状态5. * @private6. * @param {Object} target flash对象7. * @return {Boolean}8. */9. function _checkReady(target) {10. if (typeof target !== 'undefined' && typeof target.flashInit !== 'undefined' && target.flashInit()) {11. return true;12. } else {13. return false;14. }15. }16. /**17. * 创建一个随机的字符串18. * @private19. * @return {String}20. */21. function _createString() {22. var prefix = 'mw__flash__';23. return prefix + Math.floor(Math.random() * 2147483648).toString(36);24. }25.26. /**27. * 为传入的匿名函数创建函数名28. * @private29. * @param {String|Function} fun 传入的匿名函数或者函数名30. * @return {String}31. */32. function _createFunName(fun) {33. var name = '';34. name = _createString();35. window[name] = function () {36. fun.apply(window, arguments);37. };38. return name;39. }40. /***41. 反复判断Flash是欧加载完成,完成后为Flash添加回调函数..42. */43. var interval = setInterval(function () {44. try {45. var flash = thisMovie("flash");46. if (_checkReady(flash)) { //轮询flash的某个方法即可47.48. var callBack = [];49. callBack[0] = _createFunName(selectFileCallback);50. callBack[1] = _createFunName(exceedFileCallback);51. callBack[2] = _createFunName(deleteFileCallback);52. callBack[3] = _createFunName(StartUploadCallback);53. callBack[4] = _createFunName(uploadCompleteCallback);54. callBack[5] = _createFunName(uploadErrorCallback);55. callBack[6] = _createFunName(allCompleteCallback);56. callBack[7] = _createFunName(changeHeightCallback);57. thisMovie("flash").call('setJSFuncName', [callBack]);58.59. clearInterval(interval);60. }61. }62. catch (ex) {63. }64. }, 20);65.66. //获得Flash对象67. function thisMovie(movieName) {68. if (navigator.appName.indexOf("Misrosoft") != -1) {69. return window[movieName];70. }71. else {72. return document[movieName];73. }74. }75. //事件76. $(function () {76. $(function () {77. $("#upload").live("click", function () { return upload(); });78.79. });80. function Setbtn(count) {81. //// if ($("#ddlAlbum").val() != "0") {82. // if (count > 0) {83. //// $("#updisable").hide();84. // $("#upload").show();85. // }86. // else {87. //// $("#updisable").show();88. // $("#upload").hide();89. // }90. //// }91. $("#curCount").val(count);92. }93. // 通过添加文件按钮新增的需要上传文件94. function selectFileCallback(selectFiles) {95. var count = $("#curCount").val();96. count = parseInt(count) + selectFiles.length;97. Setbtn(count);98. }99. // 文件超出限制的最大体积时的回调100. function exceedFileCallback(selectFiles) {101.102. }103. //被删除的文件: 用于控制上传按钮是否显示...104. function deleteFileCallback(delFiles) {105. var count = $("#curCount").val();106. count = parseInt(count) - delFiles.length;107. Setbtn(count);108. }109. //开始上传前执行的JS函数.110. function StartUploadCallback(data) {111.112. }113. //上传单个文件后执行的JS函数.114. function uploadCompleteCallback(data) {115. try {116. var info = eval("(" + + ")");117. info && parent.imgs.push(info);118. var count = $("#curCount").val();119. count = parseInt(count) - 1;120. Setbtn(count);121. } catch (e) {alert(e)}122. }123. //上传失败后执行的JS函数.124. function uploadErrorCallback(data) {125. if (!) {126. alert("照片上传失败，请刷新后重试");127. window.location.reload();128. }129. }130. //全部完成上传后执行::定向到相册界面131. function allCompleteCallback(data) {132. // alert("上传成功！" + parent.imgs);133. // window.location.reload();134. }135. //改变Flash高度时执行136. function changeHeightCallback(data) {137.138. }139. //开始上传:添加参数：aid，表示相册， mark，表示水印，需要为每个照片都添加这两个参数。

Aspx中ckeditor上传图片

Aspx中ckeditor上传图片ckeditor_v3.6.5jquery.jsAddNews.aspx<div class="addnew_con"> 内容：<textarea name="content"id="content"style="width:600px; height:350px;"></textarea></div><script type="text/javascript"language="javascript">CKEDITOR.replace('content', addUploadButton(this));function addUploadButton(editor) {CKEDITOR.on('dialogDefinition', function(ev) {var dialogName = ;var dialogDefinition = ev.data.definition;if (dialogName == 'image') {var infoTab = dialogDefinition.getContents('info');infoTab.add({type: 'button',id: 'upload_image',align: 'center',label: '上传',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 = "uploadImgs.aspx"; //这是我自己的处理文件/图片上传的页面URLvar imgUrl = window.showModalDialog(uploadUrl);//在upload结束后通过js代码window.returnValue=...可以将图片url返回给imgUrl变量。

CKEditor3.6.2+CKFinder的用法

CKEditor3.6.2+CKFinder2.1控件的用法前期准备：下载CKEditor3.6.2和CKFinder2.1一、把CKEditor3.6.2中的ckeditor文件夹（这个文件夹一般在ckeditor_aspnet_3.6.2\_Samples目录下，只要你能找到ckeditor这个文件夹就好办）复制到你的web项目的根目录中，然后引用.dll文件（在_Samples\bin目录下，最好把他复制到项目中的ckeditor文件夹中在引用）二、把CKFinder2.1中的的ckfinder文件夹复制到你的web项目的根目录中，然后引用CKFinder.dll（在ckfinder\bin\Release目录下）在VS工具箱中添加选项卡，并右击选择“选择项”浏览把.dll和CKFinder.dll（这个基本不用），然拖拽CKEditorControl到页面！三、这时我们把ckeditor中的ckeditor.js和ckfinder中的ckfinder.js拖拽到页面上如：<script src="ckeditor/ckeditor.js"type="text/javascript"></script><script src="ckfinder/ckfinder.js"type="text/javascript"></script>四、为了CKEditor这个文本编辑器好看着，在CKEditor中的config.js添加如下代码：nguage = 'zh-cn'; //设置中文语言config.uiColor = '#AADC6E'; //编辑器颜色config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';config.toolbar_Full = [['Source', '-', 'Preview', '-', 'Templates'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print','SpellChecker', 'Scayt'], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['Form', 'Checkbox', 'Radio', 'TextField','Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'], '/', ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'], '/', ['Styles', 'Format', 'Font', 'FontSize'],['TextColor', 'BGColor'], ['Maximize', 'ShowBlocks', '-', 'About']];config.toolbar_Basic = [['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About']];config.width = 700;config.height = 300;config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹config.filebrowserFlashBrowseUrl = '/ckfinder/ckfinder.html?Type=Flash'; //上传Flash时浏览服务文件夹config.filebrowserUploadUrl ='/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';//上传文件按钮(标签)config.filebrowserImageUploadUrl ='/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';//上传图片按钮(标签)config.filebrowserFlashUploadUrl ='/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';//上传Flash按钮(标签)}五、在网上有很多人都说在CKFinder中的config.ascx添加如下代码：public override bool CheckAuthentication(){return Request.IsAuthenticated;//returntrue;}不过你不设置这一步的话，那你必须return true哦！因为这是控制安全的代码，你设置为false 的话就不能访问了！六、F5运行看看！是不是报错？其实这个错完全对我们没有什么影响！因为我们要把它给删除了，在网上叫帮CKFinder瘦身：把ckfinder文件夹中的_samples文件夹和_source文件夹删除！七、这时候你运行就没有错了，如果不行的话加我QQ：384473244。

CKEditor+CKFinder安装与配置

CKEditor + CKFinder安装与配置CKEditor 和 CKFinder是内容管理系统Drupal中比较重要的两个模块，其中CKEditor是一个文本编辑器，我们利用CKEditor 和CKFinder可以实现图片、flash等文件的上传。

下面我就详细的说说我的配置过程。

一、CKEditor的安装与配置1、到drupal官网上搜索模块ckeditor2、在官网上下载ckeditor模块的接口，下载下来为ckeditor-7.x-1.1.zip3、到/下载最新版本的ckeditor,下载为ckeditor_3.5.3.tar.gz4、解压缩接口文件夹，把文件名为ckeditor放在sites/all/modules中，在将最新版的ckeditor全部内容复制到ckeditor中5、在模块中开启ckeditor模块即可6、在用户管理下配置权限选择allow users to use ckeditor二、Ckfinder的安装与配置1、到/下载最新版本的ckfinder2、解压文件放在sites/all/modules/ckeditor/里面3、在用户管理下配置权限选择allow users to use ckfinder4、打开CKFinder 配置文件 (sites/all/modules/ckeditor/ckfinder/config.php)I) 删除 CheckAuthentication() 函数(不要担心，这个函数在filemanager.config.php还有一个)II) 在$baseDir = resolveUrl($baseUrl);下面添加一行require_once '../../../../includes/filemanager.config.php';5、在配置中配置ckeditor，在用户资料的full点击编辑File browser settings中选中ckfinder6、修改settings.php(路径为 sites/default/settings.php)，去掉变量$cookie_domain 前面的‘#’或‘//’,即是启用变量$cookie_domain。

ckeditor自定义按钮整合swfupload批量上传图片

ckeditor添加自定义按钮整合swfupload实现批量上传图片给ckeditor添加自定义按钮，由于ckeditor只能上传一张图片，如果要上传多张图片就要结合ckfinder，而ckfinder是收费的，所以就想通过自定义按钮整合swfupload实现一次上传多张图片的功能1、首先下载并安装ckeditor。

2、下载swfupload解压拷贝到对应的文件目录下3、自定义工具栏按钮:我们可以自定义ckeditor工具栏要显示的按钮，工具栏按钮定义可以参考这里。

现在我们需要向工具栏添加一个自定义功能的按钮。

ckeditor工具栏中的每个按钮都是作为插件定义在ckeditor\plugins\目录中。

我们在ckeditor\plugins\中创建一个新文件夹imagedef。

在imagedef文件夹内，我们创建一个plugin.js文件，它的代码如下：CKEDITOR.plugins.add("imagedef",{requires:["dialog"], //当按钮触发时弹出对话框init:function (a){a.addCommand("imagedef", new CKEDITOR.dialogCommand("imagedef"));a.ui.addButton("Imagedef",{label:"图片",command:"imagedef",icon:this.path + "imagedef.gif"});CKEDITOR.dialog.add("imagedef", this.path + "dialogs/imagedef.js");}});在上面的代码中我们指定自定义按钮的图标imagedef.gif，imagedef.gif放在imagedef文件夹中。

CKEditor上传图片—配置CKFinder

CKEditor上传图片—配置CKFinder来源：/leolis/archive/2012/08/29/2662357.html在网站开发中，如果有发布类似新闻的图文混排需求时，CKEditor不失为一个很好的选择，下载地址如下：/download它的前身是FCKEditor，随着它的更新，上传图片的功能被分离出去了，现在如果需要实现上传图片，要么自己写代码，还有一种方法是使用CKFinder，下载地址如下：/download下面详细描述一下使用它们的时候如何配置。

CKEditor我下载的是3.6.4，CKFinder下载的是2.3 for ，首先解压所有的文件，然后将ckeditor和ckfinder文件夹放到网站的目录下，可以删除ckeditor和ckfinder文件夹下的_samples、_source 文件夹，将CKFinder.dll添加到站点的bin/文件夹中，然后在网站页面头部添加js的引用，具体路径根据自己放置的路径设置，如下：<script src="../editor/ckeditor/ckeditor.js" type="text/javascript"></script> <script src="../editor/ckfinder/ckfinder.js" type="text/javascript"></script>在页面中添加一个textarea,具体代码如下：<textarea name="individual" id="individual"runat="server"></textarea><script type="text/javascript">CKEDITOR.replace('individual');</script>接下来打开ckeditor文件夹下的config.js文件，在CKEDITOR.editorConfig = function (config) {};方法中添加如下代码：config.filebrowserImageBrowseUrl ='../editor/ckfinder/ckfinder.html?Type=Images';config.filebrowserFlashBrowseUrl='../editor/ckfinder/ckfinder.html?Type=Flash';config.filebrowserUploadUrl='../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&t ype=Files';config.filebrowserImageUploadUrl='../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&t ype=Images';config.filebrowserFlashUploadUrl='../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&t ype=Flash';config.filebrowserWindowWidth= '800'; //“浏览服务器”弹出框的size设置config.filebrowserWindowHeight = '500';上面的路径也需要根据自己的设置。

Ckeditor与ckfinder整合forJAVA(支持文件上传)

Ckeditor + ckfinder整合for JA V A（支持文件上传）2012-06-20备注：本人使用的开发工具为eclipse 3.7.0，服务器为：apache-tomcat-7.0.20，仅供参考。

第一步：工具下载：首先下载：CKEditor本人下载并使用的版本是：CKEditor 3.6.3下载地址：/download 如下图所示：下载完成后，文件为：ckeditor_3.6.3.zip接着下载:ckfinder下载地址：/download 如下图所示：下载完成后，文件为：ckfinder_java_2.2.1.zip第二步，新建项目打开Ecilpse-->File-->New-->Dynamic Web Project 项目名：CkeditorForJava，如下图所示：单击“下一步”，如下图所示单击“下一步”，如下图所示修改Content directory 为 WebRoot。

最终点完成。

第三步，整合解压ckeditor_3.6.3.zip，然后将ckeditor文件夹全部考到WebRoot根目录下。

完成后项目结构如下图所示：修改ckeditor文件夹下的config.js文件，代码如下：/*Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.For licensing, see LICENSE.html or /license*/CKEDITOR.editorConfig = function( config ){// Define changes to default configuration here. For example: // nguage = 'fr';// config.uiColor = '#AADC6E';//配置默认配置nguage = 'zh-cn'; //配置语言// config.uiColor = '#FFF'; //背景颜色// config.width = 400; //宽度// config.height = 400; //高度// config.skin = 'v2'; //编辑器皮肤样式// 取消“拖拽以改变尺寸”功能// config.resize_enabled = false;// 使用基础工具栏// config.toolbar = "Basic";// 使用全能工具栏config.toolbar = "Full";//使用自定义工具栏// config.toolbar =// [// ['Source', 'Preview', '-'],// ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ], // ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],// ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', SpecialChar','PageBreak'],// '/',// ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],// ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],// ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],// ['Link', 'Unlink', 'Anchor'],// '/',// ['Format', 'Font', 'FontSize'],// ['TextColor', 'BGColor'],// ['Maximize', 'ShowBlocks', '-', 'About']// ];// 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。