学习fckedtor上传图片

一、从官网下载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.上面的只是一个上传页面。也就相当于一个HTML的form表单，要配置点击“上传到服务器上”按钮后请求的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;
	}

}

 

 

• 
• 大小: 10.2 KB

• 
• 大小: 46.7 KB

• 查看图片附件