ckeditor的使用

最新推荐文章于 2022-04-14 17:19:53 发布

原创最新推荐文章于 2022-04-14 17:19:53 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#upload #file #string #button #exception #action

JAVA 专栏收录该内容

86 篇文章

订阅专栏

一、下载ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip两个压缩文件，去http://ckeditor.com/官网上下载。

二、解压缩文件ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip两个文件，在ckeditor_3.6.2文件中有ckeditor文件夹；ckeditor-java-core-3.5.3中有ckeditor-java-core-3.5.3.jar、ckeditor-java-core-3.5.3-javadoc.jar和ckeditor-java-core-3.5.3-sources.jar三个jar包。

三、把ckeditor_3.6.2文件夹下的ckeditor整个复制到工程WebRoot下；然后把ckeditor-java-core-3.5.3文件夹下的三个jar包复制到WebRoot——>WEB-INF——>lib文件夹下。我已经把ckeditor和3个jar包整理出来了。

注意：该版本的不需要在web.xml文件中配置<servlet></servlet>

四、下面写一个jsp页面来使用这个ckeditor：

注意：要使用就必须先引入ckeditor.js文件

<scripttype="text/javascript"src="${ctx}/ckeditor/ckeditor.js"></script>

 <textarea  cols="180" id="editor1" name="softContent.content" rows="50"><s:property value="content.content"/></textarea>
 <script type="text/javascript">CKEDITOR.replace( 'editor1',{skin : 'kama',language : 'zh-cn'});</script>

编辑器的大小、背景颜色等在ckeditor\config.js中配置。

编辑器中图片上传：

ckeditorjava\ckeditor\plugins\image\dialogs\image.js中定义了上传的action路径/suqiu2/news/news-upload-img.action

NewAction.java：

@Action(value="news-upload-img",results={@Result(name="success",type="dispatcher",location="/upload.jsp")})
	public String uploadImg() throws Exception {
		return SUCCESS; 
	}

upload.jsp：通过swfupload插件来上传，这里不作说明。

<%@ include file="/common/taglibs.jsp"%>
<%@ include file="/common/common.jsp"%>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script type="text/javascript" src="${ctx}/js/ajaxfileupload.js"></script>
	<link href="${ctx}/resource/uploadswf/default.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="${ctx}/resource/uploadswf/swfupload.js"></script>
	<script type="text/javascript" src="${ctx}/resource/uploadswf/swfupload.queue.js"></script>
	<script type="text/javascript" src="${ctx}/resource/uploadswf/fileprogress.js"></script>
	<script type="text/javascript" src="${ctx}/resource/uploadswf/handlers.js"></script>
<script type="text/javascript">

	var swfupload;
	$(function() {
			swfupload = new SWFUpload({
				// Backend Settings
				upload_url: "${ctx}/suqiu2/news/news-upload.action;jsessionid=<%=request.getSession().getId()%>",
				file_post_name: "file",
				post_params: {},
				// File Upload Settings
				file_size_limit : "5MB",	// 5MB
				file_types : "*.jpg;*.gif;*.png;*.bmp",
				file_types_description : "All Files",
				file_upload_limit : "200",
				file_queue_limit : "200",

				// Event Handler Settings (all my handlers are in the Handler.js file)
				file_dialog_start_handler : fileDialogStart,
			 	//file_queued_handler : fileQueued,
				file_queue_error_handler : fileQueueError,
				file_dialog_complete_handler : fileDialogComplete,
				//上传进度条
				// upload_start_handler : uploadStart,
				// upload_progress_handler : uploadProgress,
				upload_error_handler : uploadError,
				upload_success_handler : myUploadSuccess,
				upload_complete_handler : uploadComplete,

				// Button Settings
				button_image_url : "${ctx}/resource/uploadswf/XPButtonUploadText_61x22.png",
				button_placeholder_id : "spanButtonPlaceholder1",
				button_width: 61,
				button_height: 22,
				button_text:"选择图片",
				button_text_left_padding:5,
				
				// Flash Settings
				flash_url : "${ctx}/resource/uploadswf/swfupload.swf",

				custom_settings : {
					progressTarget : "fsUploadProgress1",
					cancelButtonId : "btnCancel1"
				},
				// Debug Settings
				debug: false
			});
		

		function myUploadSuccess(file, serverData) {
			try {
				var jsonData = eval("("+serverData+")");
				//删除按钮
				var progress = new FileProgress(file, this.customSettings.progressTarget);
			    progress.setComplete();
				if(jsonData.attachUrl!="undefined"&&jsonData.attachUrl!=""){
					window.returnValue = jsonData.attachUrl; //返回父页面
					window.close();
				}
				 progress.toggleCancel(true,this);
			} catch (ex) {
				this.debug(ex);
			}
		}
		
	}); 
</script>
</head>
<body>
	<form action="" enctype="multipart/form-data" method="post"
		name="myform">
		<br /> <strong>
			<P>选择要上传的图片：</P>
		</strong> 图片： <span id="spanButtonPlaceholder1"></span> 
						<input id="btnCancel1" type="button" value="取消上传" onclick="cancelQueue(upload1);" disabled="disabled" style="margin-left: 2px; height: 22px; font-size: 8pt;" />
		<BR><br />
		 <div class="fieldset flash" id="fsUploadProgress1"></div>
				<!-- <INPUT type="button" value="提交" id="submit">  <INPUT
					type="reset" value="取消"> -->
	</form>
</body>
</html>

NewAction.java中上传图片的代码：

@Action(value="news-upload")
	public String uploads() {
		String fPath = saveFile();
		ServletActionContext.getResponse().setContentType("application/json");
		fPath = FilePathSptUtil.UPLOAD_URL+fPath;//图片所在的路径
		return renderText("{attachUrl:\""+fPath+"\"  }");
	}

private String saveFile(){
			String nameflll=upload();
			String AttachUrl=FilePathSptUtil.UPLOAD_CMS+FilePathSptUtil.URL_SPT+FilePathSptUtil.CMS_ZHUANTI+
					 FilePathSptUtil.URL_SPT+DateUtil.formatDateToString(new Date(), "yyyy-MM")+FilePathSptUtil.URL_SPT+nameflll;
			return AttachUrl;
		}
private String upload(){
			SimpleDateFormat formater = new SimpleDateFormat("yyyyMMddhhmmssSSSS");
			String filename=formater.format(new Date());
			String fileExtend = fileFileName.substring(fileFileName.lastIndexOf(".")+1,fileFileName.length());
			String root= FilePathSptUtil.UPLOAD_ROOT_PATH+FilePathSptUtil.UPLOAD_CMS+SPT+FilePathSptUtil.CMS_ZHUANTI+SPT+
					  DateUtil.formatDateToString(new Date(), "yyyy-MM");
			String fullName=filename+"."+fileExtend;
			String dstPath = root+SPT+fullName;	//全路径
		
		    File dirFile = new File(root);
			boolean isDir = dirFile.isDirectory();
			if(!isDir){//目录不存在则先建目录
				try{
					dirFile.mkdirs();
				}catch (Exception e) {
					File delFile = new File(root+SPT +fullName );
					deleteExitsFile(delFile);
				}
			}
			FileUtil.copyFile(file.getPath(), dstPath);//上传文件
			return fullName;
		}

文件下载： http://download.youkuaiyun.com/detail/shiyuezhong/4602723