ckedit 图片flash操作-优快云博客

本文链接：https://blog.youkuaiyun.com/u010256177/article/details/44857319

本文详细介绍了如何使用Spring+Struts2框架集成CKEditor富文本编辑器，并提供了相关的HTML、Struts2配置和Java代码实现。包括CKEditor的初始化、资源引入、图片上传功能的实现以及Struts2配置细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好长时间不写博客了，今天来写一篇，最近在用ckedit，然后就稍微整理了一下。不多说，直接上代码

技术是 spring + struts2

资源 ckeditor_4.4.6_full 资源：http://download.youkuaiyun.com/detail/u010256177/8561727

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>富文本编辑框</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
	<div id="seventh" style="height:400px;margin:0 2% 0 2%">
		<textarea id="context" rows="10" cols="120"> </textarea>
	</div>
<script type="text/javascript">
	var oCKeditor;
	(function() {
		oCKeditor = CKEDITOR.replace('context');
		oCKeditor.on('instanceReady', function(event) {
			var editor = event.editor;
			setTimeout(function() {
				// Delay bit more if editor is still not ready.
				if (!editor.element) {
					setTimeout(arguments.callee, 100);
					return;
				}
				event.removeListener('instanceReady', this.callee);
				if (editor.name == 'context') {
					var command = editor.getCommand('maximize');
					command.exec();
				}
			}, 0);
		}, null, null, 9999);
	})();
</script>
</body>
</html>

Struts2配置

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
    "http://struts.apache.org/dtds/struts-2.1.7.dtd">
<struts>
	<package name="ckeditor-action" extends="okaysoftaction-hm" namespace="/action">
	   <action name="addUploadFile" class="cn.okaysoft.hm.action.CkEditorUploadAction" method="addUploadFile"></action>
	</package>
</struts>

Java代码

package cn.okaysoft.hm.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.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import cn.okaysoft.hm.util.Uuid;


public class CkEditorUploadAction {
	private File upload;//文件
	private String uploadContentType; //文件类型
	private String uploadFileName; //文件名
	private String type; //类型
    public void setUpload(File upload) {
		this.upload = upload;
	}
	public void setUploadContentType(String uploadContentType) {
		this.uploadContentType = uploadContentType;
	}
	public void setUploadFileName(String uploadFileName) {
		this.uploadFileName = uploadFileName;
	}

	public void setType(String type) {
		this.type = type;
	}
	String filepath = "";
	String retrunFilePath = "";
	String tips = "";
	public void addUploadFile() {
		String fileName = "";
		String uploadPath = "";
		String[] imgs  = new String[]{"jpg", "bmp", "gif", "png"}; //img允许后缀
		String[] swfs = new String[]{"swf"};
		boolean flag = false; //这个是用来判断传入的图片或flash是不是正确的格式
		if(uploadFileName!=null && !uploadFileName.equals("")){
			try {
				
				String expandedName = uploadFileName.substring(
						uploadFileName.lastIndexOf(".") + 1, uploadFileName.length()); // 将文件的后缀名拿出来
				
				InputStream is = new FileInputStream(upload);
				if(type.equals("img")){
					tips = "对不起，您插入的图片格式不正确，图片的格式为:jpg, bmp, gif, png";
					for(String im:imgs){
					   	if(expandedName.equals(im)){
					   		flag = true;
					   		break;
					   	}
					}
					filepath ="img/upload";
					retrunFilePath = "/ckedit/img/upload";
					uploadPath = ServletActionContext.getServletContext().getRealPath(filepath);
				}else{
					for(String sw:swfs){
						tips = "对不起，您插入的flash格式不正确，格式应该为:swf"; 
					   	if(expandedName.equals(sw)){
					   		flag = true;
					   		break;
					   	}
					}
					filepath = "flash/upload";
					retrunFilePath = "/ckedit/flash/upload";
					uploadPath = ServletActionContext.getServletContext().getRealPath(filepath);	
				}
				 
				if(flag){
					File f1 = new File(uploadPath);
					if (!f1.exists()) {
						f1.mkdirs();
					}
					fileName = Uuid.getUuid();  //采用UUID的方式随即命名  
					fileName = fileName + "." + expandedName;  // 加上后缀名  
					System.out.println(expandedName);
					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();
					getPictureInfo(fileName);
				}else{
					getNotSuccInfo();
				}
			} catch (Exception e) {
				e.printStackTrace();
				getResponseInfo();
			}
		} else{
			getResponseInfo();
		}
	}
	
	//提示信息，表示图片成功插入文件夹
	public void getResponseInfo() {
		String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum"); 
	       PrintWriter out = null;
		try {
			HttpServletResponse response  = ServletActionContext.getResponse();
		    response.setContentType("text/html");
			response.setCharacterEncoding("utf-8");
			out = response.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
		     out.println("<script type=\"text/javascript\">");    
			 out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'文件上传失败');");   
			 out.println("</script>");  
	}
	
	//传递的文件类型是不正确的
	public void getNotSuccInfo(){
		String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum"); 
	       PrintWriter out = null;
		try {
			HttpServletResponse response  = ServletActionContext.getResponse();
		    response.setContentType("text/html");
			response.setCharacterEncoding("utf-8");
			out = response.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
		}
		     out.println("<script type=\"text/javascript\">");   
			 out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'','" + tips + "');");   
			 out.println("</script>"); 
	}
	//图片插入成功后进行预览
	public void getPictureInfo(String fileName) throws Exception{
		PrintWriter out = null;
		HttpServletResponse response  = ServletActionContext.getResponse();
	    response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		out = response.getWriter();
		String callback =ServletActionContext.getRequest().getParameter("CKEditorFuncNum");   
		out.println("<script type=\"text/javascript\">");  
		out.println("window.parent.CKEDITOR.tools.callFunction("+ callback + ",'" +retrunFilePath +"/"+ fileName + "','')");   
		out.println("</script>");  
	}
	
	 
}

要修改ckedit里面的config.js文件

/**
 * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	//工具栏
	config.toolbar =
	[
	    ['Preview','Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
	    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
	    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
	    ['Link','Unlink','Anchor'],
	    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
	    ['Styles','Format','Font','FontSize'],
	    ['TextColor','BGColor'],
	    ['Maximize', 'ShowBlocks','-','Source','-','Undo','Redo']
	 
	];
	  //图片浏览配置======路径配置自己的上传路径
	  //config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';  
	  //图片上传配置 =====路径配置自己服务器的路径
	 // config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; 
	  config.filebrowserImageUploadUrl = 'action/addUploadFile.a?type=img';  
	  config.filebrowserFlashUploadUrl = 'action/addUploadFile.a?type=flash'; 
};