CKEditor编辑器的工具栏中初始的时候应该是这样子的,没有图片上传按钮
并且预览中有一堆火星文,可以修改相应配置删除它。
第一种方法:打开ckeditor/plugins/image/dialogs/image.js文件,搜索“b.config.image_previewText”,(b.config.image_previewText||'')单引号中的内容全删了,注意别删多了。(由于ckeditor的很多js文件都是压缩过的,格式很难看,很容易删错,所以不推荐此种方法)
第二种方法:打开config.js文件,加入下面一句话
config.image_previewText=' '; //预览区域显示内容
接下来就是action中的上传方法:
config.js
最后上传图片成功
下面研究图片上传
要想出现上传按钮,两种方法
第一种:还是刚才那个image.js
搜索“upload”可以找到这一段 id:'Upload',hidden:true,而我使用的4.3的是
搜索“upload”可以找到这一段 id:'Upload',hidden:true,而我使用的4.3的是
id:"Upload",hidden:!0,反正改为false就行了,(遗憾的是此种方法对我这个版本不起作用)
第二种:打开config.js文件,加入下面一句话
config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.do"; //待会要上传的action或servlet
OK现在基本上是下面这个样子的了
OK现在基本上是下面这个样子的了
上面的只是一个上传页面。也就相当于一个HTML的form表单,
要配置点击"上传到服务器上"按钮后请求的Action。已在ckeditor/config.js中配置。
就是上面的 config.filebrowserImageUploadUrl = "admin/UserArticleFileUpload.do";
可使用chrome审查元素查看代码
接下来就是action中的上传方法:
- import java.io.File;
- import java.io.FileInputStream;
- import java.io.FileOutputStream;
- import java.io.IOException;
- import java.io.InputStream;
- import java.io.OutputStream;
- import java.io.PrintWriter;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import org.apache.struts2.ServletActionContext;
- public class ImgUploadAction {
- private File upload; // 文件
- private String uploadContentType; // 文件类型
- private String uploadFileName; // 文件名
- /**
- * 图片上传
- *
- * @return
- * @throws IOException
- */
- public String imgUpload() throws IOException {
- // 获得response,request
- HttpServletResponse response = ServletActionContext.getResponse();
- HttpServletRequest request = ServletActionContext.getRequest();
- response.setCharacterEncoding("utf-8");
- PrintWriter out = response.getWriter();
- // CKEditor提交的很重要的一个参数
- String callback = request.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();
- // 返回"图像"选项卡并显示图片 request.getContextPath()为web项目名
- out.println("<script type=\"text/javascript\">");
- out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
- + ",'" + request.getContextPath() + "/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.js
- CKEDITOR.editorConfig = function( config ) {
- config.image_previewText=' '; //预览区域显示内容
- config.filebrowserImageUploadUrl= "ImgUpload.action"; //要上传的action或servlet
- };
最后上传图片成功
相关推荐
近日要用到CKEditor实现图片上传,网上找了好多代码,要么跑不起来,要么不全,比如不知道如何返回值。跳了不少坑,现在彻底搞定。 目前上传用的是ASP.NET,可以随便切换成PHP、JAVA或其它的语言 只需要把ckeditor...
ckeditor整合图片上传,ckeditor,图片上传
CKEditor 自主控制图片上传 可以将上传图片记录到数据库中
ckeditor 多图上传以及已经 ASP.net MVc 增删查改,直接可以用VS打开,需要添加数据库SQL server ,详情看说明
ckeditor for jave上传图片
ckeditor 自定义上传图片 可以自定义上传图片按钮,源码,
Ckeditor上传图片!本身Ckeditor不具备上传图片功能的!前两天在一个博客园的一个博主那里讨了点Ckeditor上传图片的方法,现在共享给大家!博主的博客地址和实现方式我压缩在文件中了!大家支持正版哈!
用自定义图片上传按钮代替原来的图片上传按钮,实现即时上传插入。覆盖原ckeditor。修改ckeditor.js中imgupload()的上传接口路径。根据接口返回自定义 success: function 中的代码解析出图片路径。
ckeditor编辑器上传图片,文件,并且里面附带工具显示按钮
可以实现网络上传功能但是从官网上下载的没有上传图标,只能写地址,很不方便,这里增加了js代码来实现上传功能
CKEditor实现图片上传使用Struts2 博文参考地址:http://blog.csdn.net/itmyhome1990/article/details/17264627
利用jsp实现ckeditor_3_6_2 上传图片功能,里面包含完整的工程,不过需要自己引入commons-fileupload-1.2.1.jar,commons-io-1.4.jar文件上传包,网上一大把。只要能正确引入,该工程就能完成
CKEditor实现本地视频和图片的上传功能,不用kfinal
这个ckeditor的version为4.6.1,。 主要是添加了拖拽上传图片个上传视频的功能, 具体教程看博文:http://blog.csdn.net/u014044812/article/details/53897024
asp.net页面中CKEDITOR文本编辑框,配置上传图片的功能,搞了好久,终于弄出来了。
最后配置视频上传路径的URL路径,也就是POST上传文件的地址:config.filebrowserFlvPlayerUploadUrl = '/ckeditor/upload_json.ashx?dir=media',注意一定要是filebrowserFlvPlayerUploadUrl,这里要对应flvPlayer...
CKeditor的图片上传浏览的组件-Java版本 配置好了就可以直接用了,UTF-8编码完美版本。
ckeditor servlet 文件 本地 上传
ckeditor ckfinder 上传本地图片
ckeditor 图片上传 远程图片下载