CKEditor 在jsp中实现文件上传

1、ckeditor 在jsp中实现文件上传 ckeditor 在jsp中实现文件上传 ckeditor 在jsp中实现文件上传的完整例子 2021-03-26 12:23:01 阅读1907 评论7 字号：大中小 订阅 备注:转载请注明出处 ckeditor是一个优秀的网页编辑器,但网上的jsp实现上传的例子很少,经过几天的搜寻与钻研,最终上传胜利,特殊感谢: /u/20210127/11/d2254308-db90-4b1f-adca-b36bd8956264.html的. 下面我们开头配置上传: 我们用的是ckeditor_3.2 + struts2 ,用struts2的fileupload

2、stack实现 1:我们将ckeditor_3.2 下载,可以到官方网站上下载: 2.下载下来我们进行安装, 解压压缩文件,.解压缩后得到ckeditor的程序文件夹,里面一些无用的文件可以删除,比如例子_samples,未压缩的源代码_source等.只保留以下文件即可: 其中skins文件夹是皮肤文件夹,三种皮肤可任选其一。把这些整理好的文件放到项目webroot下 3.配置ckeditor： 其中ckeditor 的配置网上教程许多，这里不作太多解释，只是看一下我的配置：在config.js中配置如下: ckeditor.editorconfig = function(config) n

3、guage = 'zh-cn' / 配置语言 config.uicolor = '#fff' / 背景颜色 config.width = 'auto' / 宽度 config.height = '300px' / 高度 config.skin = 'office2021'/界面v2,kama,office2021 ckeditor 在jsp中实现文件上传 config.toolbar = 'full'/ 工具栏风格full,basic ; 4.在页面中引用：如下 textarea cols=80 i

4、d=content name=fileupload /textarea script type=text/javascript ckeditor.replace('content'); /content为textarea的id /script 效果图 : 点击图片按钮,效果图为 ckeditor 在jsp中实现文件上传 这其中没有上传按钮,只有一个”源文件”引用文件的路径文本框,虽然能开启上传功能：但经我测试其上传在服务器上的不到文件的值； 5：经我几天的查找资料：是 的让我上传图片胜利：再次特殊感谢： 在插入image对话框的url文本框的旁边放一个我自己的upload按钮，

5、点击后页面转入我自己定义的文件/图片上传页面，接下来我自己处理upload的整个过程。最终返回一个url，通过这个url可以看到图片 借助ckeditor强大的扩展力量，我们完全可以以javascript实现这一目标。 修改代码如下： textarea cols=80 id=content name=fileupload /textarea script type=text/javascript ckeditor.replace('content',adduploadbutton(this); function adduploadbutton(editor) ckeditor

6、在jsp中实现文件上传 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

7、: '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 b

8、rowser button ); function adduploadimage(theurlelementid) var uploadurl = ./platform/uploadsfiles.jsp; /这是我自己的处理文件/图片上传的页面url var imgurl = window.showmodaldialog(uploadurl); /在upload结束后通过js代码window.returnvalue=.可以将图片url返回给imgurl变量。 /更多window.showmodaldialog的使用方法参考 var urlobj = document.getelementbyi

9、d(theurlelementid); urlobj.value = imgurl; urlobj.fireevent(onchange); /触发url文本框的onchange大事，以便预览图片 /script ckeditor 在jsp中实现文件上传 说明：ckeditor的扩展基本上都是通过on方法实现的。on方法有2个参数，第一个是ckeditor内部的各种大事名称，类似一个钩子。其次个参数是要扩展的代码，通常是一个js函数。由于我们要改动的是image对话框，所以对应的大事名称是dialogdefinition，对话框的名字是image。image url文本框在info选项卡内，通

10、过getcontents('info')定位到该选项卡，然后通过infotab.add()方法就可以在选项卡内添加新的元素了。元素定义是json格式。我们这里定义了一个button，其中包括标签(label)和点击(onclick)以后要执行的动作（通常也是个js函数）。infotab.add()其次个参数是用来指定新元素的位置在该元素之前。假如不供应这个参数则新元素放在选项卡最终。我们在这里将这个新的upload按钮放在ckeditor默认的browser按钮前面。 upload按钮点击后就是进行upload动作。这个是通过adduploadimage()完成的。该函数接受一

11、个id参数，用来指定upload完成后图片的url返回给哪个表单元素。通过查看源代码可知图片url文本框的id是txturl，但该id是ckeditor自己内部的id,不是页面上最终生成的html的id。不过ckeditor也供应了方法getcontentelement()和getinputelement()进行2者的转换。 adduploadimage函数内容也很简洁，先指定我自己的文件上传页面的url，然后在一个模态窗口中打开这个页面，处理文件上传的全部细节。最终的结果是将图片上传后在服务器上的url地址返回给一个变量imgurl。最终把这个变量赋值给传进来的图片url文本框里。最终手工触

12、发一下onchange大事，这样在image对话框里就能看到图片的预览效果了。 效果如下： 点击“上传”按钮：如图： ckeditor 在jsp中实现文件上传 这是弹出的网页对话框： 其中代码如下： body s:form action=fileuploadsss method=post name=pos enctype=multipart/form-data target=smz iframe name=smz width=0 height=0 frameborder=0 style=display: none/iframe table width=80% border=1 cellspac

13、ing=0 cellpadding=0 tr td width=20% align=right font color=red*/font上传图片文件 /td td width=20% s:file name=myfile/s:file s:submit value=上传/s:submit /tr /table /s:form s:hidden name=pagepath id=_page_path/s:hidden /body script type=text/javascript var _page_path = document.getelementbyid(_page_path).val

14、ue; if(null!=_page_path !=_page_path) window.returnvalue=_page_path; window.close(); ckeditor 在jsp中实现文件上传 /script 说明：1iframe name=smz 是防止提交后页面跳转的，其中name与s:form的target字段相同 2s:hidden name=pagepath 是后台向前台传递的图片在服务器的位置路径 3js: window.returnvalue=_page_path; 是网页对话框向父页面传值 6：struts2上传配置(即点击上传按钮时要执行的程序) web.x

15、ml中配置如下: filter filter-name struts-cleanup /filter-name filter-class org.apache.struts2.dispatcher.actioncontextcleanup /filter-class /filter filter-mapping filter-name struts-cleanup /filter-name url-pattern /* /url-pattern /filter-mapping filter filter-namestruts2/filter-name filter-class org.apac

16、he.struts2.dispatcher.filterdispatcher /filter-class /filter filter-mapping filter-namestruts2/filter-name url-pattern/*/url-pattern /filter-mapping 在struts.xml中配置如下: ckeditor 在jsp中实现文件上传 action name =fileuploadsss class=处理上传action路径 interceptor-ref name =fileuploadstack / result name =success./plat

17、form/uploadsfiles.jsp/result /action 说明:返回结果应到那”网页对话框页面” 处理上传action代码: import java.io.bufferedinputstream; import java.io.bufferedoutputstream; import java.io.file; import java.io.fileinputstream; import java.io.fileoutputstream; import java.io.inputstream; import java.io.outputstream; import java.u

18、til.date; import javax.servlet.http.httpservletrequest; import org.apache.struts2.servletactioncontext; import com.opensymphony.xwork2.actionsupport; public class fileuploadaction extends actionsupport private static final long serialversionuid = 572146812454l ; private static final int buffer_size

19、= 16 * 1024 ; private file myfile; /网页中file字段的name private string contenttype; /struts2中必需字段,主要是set方法 private string filename; / struts2中必需字段,主要是set方法 private string imagefilename; /要上传的图片在服务器中的名称 private string imagepath; /保存服务器中的路径 private string pagepath; /页面中要引用的url public string getpagepath() r

20、eturn pagepath; ckeditor 在jsp中实现文件上传 public void setpagepath(string pagepath) this.pagepath = pagepath; public string getimagepath() return imagepath; public void setimagepath(string imagepath) this.imagepath = imagepath; public void setmyfilecontenttype(string contenttype) this.contenttype = conten

21、ttype; public void setmyfilefilename(string filename) this.filename = filename; public void setmyfile(file myfile) this .myfile = myfile; public string getimagefilename() return imagefilename; private static void copy(file src, file dst) try inputstream in = null ; outputstream out = null ; ckeditor

22、 在jsp中实现文件上传 try in = new bufferedinputstream( new fileinputstream(src), buffer_size); out = new bufferedoutputstream( new fileoutputstream(dst), buffer_size); byte buffer = new byte buffer_size; while (in.read(buffer) 0 ) out.write(buffer); finally if ( null != in) in.close(); if ( null != out) out.close(); catch (exception e) e.printstacktrace(); override public string