学习fckedtor上传图片

原创 2013年12月04日 10:16:23

一、从官网下载ckeditor相关的包

1.删除_samples和_source文件夹,分别为示例文件和未压缩源程序

2.删除lang文件夹下除zh-cn.js,en.js下的所有语言文件.根据需要删除

3.删除根目录下的changes.html(更新列表),install.html(安装指向),license.html(使用许可).

4.删除skins目录下不需要的皮肤.我一般用V2(简单.朴素) //如果只保留V2则必须在config.js中指定皮肤

 

值得说的是skin选项,有3中,v2就是还原到FCKEditor的风格,kama和office2003是新风格,我使用了office2003风格,官网的样式是kama。配置了skin后就不用配置uiColor了。

 

二、ckeditor 3.0.1相关文件配置路径 

1./ckeditor.js   核心文件,调用需加载

2./config.js     配置文件,参数配置均在此完成

3./plugins/smiley/images 表情符号.

 

如何给弹出上传文件按钮?

1.首先,还是image.js这个文件,搜索“upload”可以找到这一段

id:'Upload',hidden:true

实际上上传功能被隐藏了,把上面的true改成false,再打开编辑器,就能找到上传功能了。

 

 

2.上面的只是一个上传页面。也就相当于一个HTMLform表单,要配置点击“上传到服务器上”按钮后请求的Action。可以在ckeditor/config.js中配置。

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.filebrowserUploadUrl="actions/ckeditorUpload";

	var pathName = window.document.location.pathname;
    //获取带"/"的项目名,如:/uimcardprj
    var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    //ckeditorUpload是请求的URL,也就是点击这个按钮就会post到ckeditorUpload地址进行处理,
    //这里指向的是Struts 2的一个Action。当然,也可以用servlet或者ASP、PHP等来处理请求
    config.filebrowserImageUploadUrl = projectName+'/ckeditorUpload.action'; //固定路径

    config.toolbar =
    [
       ['Source', '-', 'Preview', '-'],
        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
        ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],        
        '/',
        ['Bold', 'Italic', 'Underline'],
        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
        ['Link', 'Unlink', 'Anchor'],
        ['addpic','Flash','Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],//此处的addpic为我们自定义的图标,非CKeditor提供。
        '/',
        ['Styles', 'Format', 'Font', 'FontSize'],
        ['TextColor', 'BGColor'],
       
    ];

};

 

和FCKEditor不同的是,CKEditor的配置需要使用config.js。那我们先来配置config.js。

CKEDITOR.editorConfig = function(config) {

config.language = 'zh-cn'; // 配置语言

config.uiColor = '#FFF'; // 背景颜色

config.width = 'auto'; // 宽度

config.height = '300px'; // 高度

config.skin = 'office2003';//界面v2,kama,office2003

config.toolbar = 'Full';// 工具栏风格Full,Basic

}; 

 

 

<action name="ckeditorUpload" class="com.newford.test.CkeditorUpload"></action>

package com.newford.test;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
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;

import com.opensymphony.xwork2.ActionSupport;

public class CkeditorUpload extends ActionSupport {

	private File upload;
	private String uploadContentType;
	private String uploadFileName;

	public String execute() throws Exception {
		HttpServletResponse response = ServletActionContext.getResponse();
		HttpServletRequest request = ServletActionContext.getRequest();
		
		response.setCharacterEncoding("GBK");
		PrintWriter out = response.getWriter();

		// 对文件进行校验
		if (upload == null || uploadContentType == null
				|| uploadFileName == null) {
			out.print("<font color=\"red\" size=\"2\">*请选择上传文件</font>");
			return null;
		}

		if ((uploadContentType.equals("image/pjpeg") || uploadContentType
				.equals("image/jpeg"))
				&& uploadFileName.substring(uploadFileName.length() - 4)
						.toLowerCase().equals(".jpg")) {
			// IE6上传jpg图片的headimageContentType是image/pjpeg,而IE9以及火狐上传的jpg图片是image/jpeg
		} else if (uploadContentType.equals("image/png")
				&& uploadFileName.substring(uploadFileName.length() - 4)
						.toLowerCase().equals(".png")) {

		} else if (uploadContentType.equals("image/gif")
				&& uploadFileName.substring(uploadFileName.length() - 4)
						.toLowerCase().equals(".gif")) {

		} else if (uploadContentType.equals("image/bmp")
				&& uploadFileName.substring(uploadFileName.length() - 4)
						.toLowerCase().equals(".bmp")) {

		} else {
			out.print("<font color=\"red\" size=\"2\">*文件格式不正确(必须为.jpg/.gif/.bmp/.png文件)</font>");
			return null;
		}

		if (upload.length() > 600 * 1024) {
			out.print("<font color=\"red\" size=\"2\">*文件大小不得大于600k</font>");
			return null;
		}

		// 将文件保存到项目目录下
		InputStream is = new FileInputStream(upload);
		String uploadPath = ServletActionContext.getServletContext()
				.getRealPath("/img/postImg"); // 设置保存目录
		String fileName = java.util.UUID.randomUUID().toString(); // 采用UUID的方式随机命名
		fileName += uploadFileName.substring(uploadFileName.length() - 4);
		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();

		// 设置返回“图像”选项卡
		String callback = ServletActionContext.getRequest().getParameter(
				"CKEditorFuncNum");
		out.println("<script type=\"text/javascript\">");
//		System.out.println(request.getRemoteAddr());
		String url = request.getScheme()+"://"+ request.getServerName()+":"+request.getServerPort() +request.getContextPath()+"/"; 
//		System.out.println(url);
		out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
				+ ",'" + url + "img/postImg/" + 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;
	}

}

 

 

  • dd50c332-44bf-3d5f-9ab9-d5c1ab6310c0-thumb.jpg
  • 大小: 10.2 KB
  • b4424f4a-a82e-3d1d-9c8d-634bfecd9f30-thumb.jpg
  • 大小: 46.7 KB

图片上传5-多个图片上传,独立项目Demo和源码

图片上传,一次性可以上传多个图片,每个图片可以有名字、URL、排序、备注等字段。这是区别于使用百度WebUploader等多图上传工具的地方。项目相关图片Jar包管理:Maven用到的框架:Sprin...
  • FansUnion
  • FansUnion
  • 2015年11月03日 14:13
  • 1887

WebView加载html实现网页上传本地文件(图片,拍照,语音等)

前言: 这里有两个方案,第一个使用Andorid客户端和JavaScript互相调用方法来实现,这种方法极力不推荐,它会增加服务端和客户端的开发成本。 第二种就是继承WebViewChromeCl...
  • langwang2
  • langwang2
  • 2015年09月21日 23:42
  • 862

spring boot实现上传图片并在页面上显示

最近在使用spring boot搭建网站的过程之中遇到了这样一个问题:用户注册时需要上传一个属于自己的头像,注册成功之后跳转到个人中心,在个人中心中显示用户信息.其中在显示头像的时候遇到了问题:上传头...
  • qq375688290
  • qq375688290
  • 2017年12月13日 21:54
  • 96

JFinal学习笔记(四) 实现简单的图片上传

图片上传是网站开发中非常常用的一个功能,本文将详细描述在jfinal框架下如何实现图片上传功能。 首先我在实现图片上传功能时用到了uploadify插件,因此在开发时需要引入相应的文件,分别是upl...
  • tczhoulan
  • tczhoulan
  • 2015年09月04日 16:07
  • 4818

php完整图片上传代码

我们的目标效果:网站后台图片上传,点击上传选择图片,上传成功之后自动把图片名称放在input文本框内!! 先说使用方法吧:(代码在下方自行复制,共三个demo页) 首先,最好单独创建个文件夹把...
  • WW_CSDN
  • WW_CSDN
  • 2015年01月26日 16:31
  • 6018

前端js实现图片上传预览

前端实现图片上传预览,实现的原理是使用input标签,type=file,实现图片的上传,对input进行onchange事件的监听,当input的value值改变时代表用户已经上传了图片,而inpu...
  • Miss_Liang
  • Miss_Liang
  • 2017年06月05日 13:55
  • 2959

用javascript实现图片上传并预览

最近在开发的过程中遇到了一个图片上传并预览的问题。其实这问题不难。chrome,FF,IE10+可以用FileReader来实现。IE9-可以用css的滤镜来实现。一开始我也是这样干了。但是测试的时候...
  • baidu_24024601
  • baidu_24024601
  • 2016年04月28日 17:34
  • 5556

java上传图片文件

总的说图片上传有两种方式,一种是把图片文件写到数据库中,另一种是存到服务器文件目录中。写到数据库中的图片文件需要转换成二进制流的格式,占用数据库空间比较,适合少量图片的存储,比如说,系统中某些小图标,...
  • lmdcszh
  • lmdcszh
  • 2013年06月30日 22:46
  • 66777

使用base64进行移动端图片上传

之前搞微信上的图片上传,想直接通过接口上传到自己的图片服务器,发现移动端浏览器上挺多坑的,使用最简单的form-data形式好像不成。研究了一下,发现base64格式通用性较强。base64编码bas...
  • dreamer2020
  • dreamer2020
  • 2016年07月31日 18:17
  • 5974

CKEditor实现图片上传

本人用的CKEditor版本为4.3 CKEditor配置和部署参考XXX。 CKEditor编辑器的工具栏中初始的时候应该是这样子的,没有图片上传按钮 并且预览中有一堆火星文,可以修改相应配置...
  • itmyhome
  • itmyhome
  • 2013年12月13日 17:56
  • 50801
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章: 学习fckedtor上传图片
举报原因:
原因补充:

(最多只允许输入30个字)