CKEditor编辑器的工具栏中初始的时候应该是这样子的,没有图片上传按钮
并且预览中有一堆火星文,可以修改相应配置删除它。
第一种方法:打开ckeditor/plugins/image/dialogs/image.js文件,搜索“b.config.image_previewText”,(b.config.image_previewText||'')单引号中的内容全删了,注意别删多了。(由于ckeditor的很多js文件都是压缩过的,格式很难看,很容易删错,所以不推荐此种方法)
第二种方法:打开config.js文件,加入下面一句话
config.image_previewText=' '; //预览区域显示内容
下面研究图片上传
要想出现上传按钮,两种方法
第一种:还是刚才那个image.js
搜索“upload”可以找到这一段 id:'Upload',hidden:true,而我使用的4.3的是
id:"Upload",hidden:!0,反正改为false就行了,(遗憾的是此种方法对我这个版本不起作用)
第二种:打开config.js文件,加入下面一句话
config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.do"; //待会要上传的action或servlet
OK现在基本上是下面这个样子的了
上面的只是一个上传页面。也就相当于一个HTML的form表单,
要配置点击"上传到服务器上"按钮后请求的Action。已在ckeditor/config.js中配置。
就是上面的config.filebrowserImageUploadUrl = "admin/UserArticleFileUpload.do";
可使用chrome审查元素查看代码
接下来就是action中的上传方法:public class ImageUpload extends WebSupport {
private File upload; //文件
private String uploadContentType; //文件类型
private String uploadFileName; //文件名
/**
* 图片上传
* @return
* @throws IOException
*/
public String fileUpload() throws IOException{
//HttpServletResponse response = ServletActionContext.getResponse();
getResponse().setCharacterEncoding("utf-8");
PrintWriter out = getResponse().getWriter();
// CKEditor提交的很重要的一个参数
String callback = getRequest().getParameter("CKEditorFuncNum");
String expandedName = ""; //文件扩展名
if (uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) {
//IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg
expandedName = ".jpg";
}else if(uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")){
//IE6上传的png图片的headimageContentType是"image/x-png"
expandedName = ".png";
}else if(uploadContentType.equals("image/gif")){
expandedName = ".gif";
}else if(uploadContentType.equals("image/bmp")){
expandedName = ".bmp";
}else{
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)');");
out.println("</script>");
return null;
}
if(upload.length() > 600*1024){
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件大小不得大于600k');");
out.println("</script>");
return null;
}
InputStream is = new FileInputStream(upload);
String uploadPath = ServletActionContext.getServletContext().getRealPath("/img/uploadImg");
String fileName = java.util.UUID.randomUUID().toString(); //采用时间+UUID的方式随即命名
fileName += expandedName;
File file = new File(uploadPath);
if(!file.exists()){ //如果路径不存在,创建
file.mkdirs();
}
File toFile = new File(uploadPath, fileName);
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();
// 返回"图像"选项卡并显示图片
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "/eHomePlus/img/uploadImg" + fileName + "','')");
out.println("</script>");
return null;
}
public File getUpload() {
return upload;
}
public void setUpload(File upload) {
this.upload = upload;
}
public String getUploadContentType() {
return uploadContentType;
}
public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}
public String getUploadFileName() {
return uploadFileName;
}
public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}
}
config.jsCKEDITOR.editorConfig = function( config ) {
config.filebrowserImageUploadUrl = "admin/UserArticleFileUpload.do"; //固定路径
config.image_previewText=' '; //预览区域显示内容
};
最后上传图片成功
PS:不同版本实现的方法与效果可能不太一样,只作参考。
分享到:
相关推荐
近日要用到CKEditor实现图片上传,网上找了好多代码,要么跑不起来,要么不全,比如不知道如何返回值。跳了不少坑,现在彻底搞定。 目前上传用的是ASP.NET,可以随便切换成PHP、JAVA或其它的语言 只需要把ckeditor...
CKEditor实现图片上传使用Struts2 博文参考地址:http://blog.csdn.net/itmyhome1990/article/details/17264627
可以实现网络上传功能但是从官网上下载的没有上传图标,只能写地址,很不方便,这里增加了js代码来实现上传功能
可以直接放入tomcate运行
Ckeditor上传图片!本身Ckeditor不具备上传图片功能的!前两天在一个博客园的一个博主那里讨了点Ckeditor上传图片的方法,现在共享给大家!博主的博客地址和实现方式我压缩在文件中了!大家支持正版哈!
CKEditor实现本地视频和图片的上传功能,不用kfinal
使用CKEditor3.6.0版本,使用上传组件实现Servlet上传图片,含有列子
主要为大家详细介绍了java使用CKEditor实现图片上传功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要介绍了Yii结合CKEditor实现图片上传功能,Yii是大名鼎鼎的PHP开发框架,CKEditor则是大名鼎鼎的所见即所得编辑器,需要的朋友可以参考下
用自定义图片上传按钮代替原来的图片上传按钮,实现即时上传插入。覆盖原ckeditor。修改ckeditor.js中imgupload()的上传接口路径。根据接口返回自定义 success: function 中的代码解析出图片路径。
ckeditor servlet 文件 本地 上传
利用jsp实现ckeditor_3_6_2 上传图片功能,里面包含完整的工程,不过需要自己引入commons-fileupload-1.2.1.jar,commons-io-1.4.jar文件上传包,网上一大把。只要能正确引入,该工程就能完成
ckeditor与ckfinder(java版)整合详细流程 实现了图片的上传功能
使用java语言struts技术实现富文本编辑器的图片上传功能
ckeditor包,js,代码,说明全都在里面.
ckeditor实现 视频上传CKEditor 是新一代的 FCKeditor,是一个重新开发的版本。CKEditor 是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。
ckeditor文件上传功能,附图片上传示例,java程序及返回结果。 strut配置 <param name="allowedTypes">image/bmp||image/png||image/gif||image/jpeg||image/jpg||image/pjpeg</param> ...
pre_id:图片上传到服务器后的名称的前辍,方便日后清理等维护工作,如不需要,设为''; uploadLocalFile(localUrl, name) 本方法用于将单独本地图片上传到服务器,参数意义如下: localUrl:图片的...
Flask项目——集成富文本编辑器CKeditor,实现了图片上传、文件上传、Flash上传等功能。方便进行项目集成及应用。代码无需任何修改,可完美执行!!! Flask项目——集成富文本编辑器CKeditor,实现了图片上传、...