ckeditor的使用

来源：互联网发布：seo营销培训编辑：程序博客网时间：2024/06/05 04:02

一、下载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 Settingsupload_url: "${ctx}/suqiu2/news/news-upload.action;jsessionid=<%=request.getSession().getId()%>",file_post_name: "file",post_params: {},// File Upload Settingsfile_size_limit : "5MB",// 5MBfile_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 Settingsbutton_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 Settingsflash_url : "${ctx}/resource/uploadswf/swfupload.swf",custom_settings : {progressTarget : "fsUploadProgress1",cancelButtonId : "btnCancel1"},// Debug Settingsdebug: 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">  <INPUTtype="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.csdn.net/detail/shiyuezhong/4602723