step-by-step系列fckeditor结合smartupload实现可视化图文混排
★★★ 本篇为原创，需要引用转载的朋友请注明：《 http://stephen830.iteye.com/blog/256174 》 谢谢支持！ ★★★前面写的2篇step-by-step的文章，浏览次数还是蛮可观的，说明还是有不少的朋友喜欢看的，为此我也感到很欣慰，以后，将继续推出技术类的step-by-step文章，分享知识，分享快乐。
在做B/S架构的项目（产品）中经常会遇到需要图文混排的地方，比如做1个文章发布模块，文章的文字和插图就是一个简单的图文混排，文字中可以插入多张图片，并且调整图片位置。
本篇就将详细的讲述如何通过jsp+java来实现这个图文混排。下面将要使用到的技术有2块：
（1）WEB编辑器：这里采用fckeditor，相信很多朋友都知道或者已经用过了，fckeditor官方网站为
（2）文件上传类：这里采用smartupload，关于这一块不了解的朋友，可以看我的另一篇文章[上传下载组件SmartUpload使用方法 http://stephen830.iteye.com/admin/blogs/255010]
在开始下面的步骤之前，请先到文章的最后下载整个源程序 editor.zip ，解压后加到你的WEB项目中。
第1步：需要一个显示图文混排的html页面。（例子 example.html ，在editor.zip中已经包含了 \admin\example）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>图文混排</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="../scripts/fckeditor/fckeditor.js"></script></head><body bgcolor="#FFFFFF" topmargin="50px" leftmargin="5px" rightmargin="5px"><script>window.onload = function(){var oFCKeditor = new FCKeditor( 'co_body' ) ;//co_body 对应下面表单中的textarea组件oFCKeditor.BasePath= "/bbyifu/admin/scripts/fckeditor/" ;//指定路径fckeditor在项目中的路径 根据自己的实际情况填写oFCKeditor.Width="560px";//fckeditor编辑器 宽度oFCKeditor.Height="280px";//fckeditor编辑器 高度oFCKeditor.ToolbarSet='Basic';//指定fckeditor编辑器显示的样子，定义在 \admin\scripts\fckeditor\fckconfig.js中的参数 FCKConfig.ToolbarSets["Basic"]，你也可以自己重新定义oFCKeditor.ReplaceTextarea() ;//用fckeditor编辑器来替换表单中的textarea组件}</script><form method="post" name="frmSubmit"><table width="100%" align="center" cellspacing="0" cellpadding="2" border="0"><tr height="40"><td >(jsp+java)图文混排: fckeditor smartupload<div><textarea name="co_body"></textarea></div></td></tr><tr height="30"><td ><input type="submit" name="submit" class="buttonred" value="保存" ></td></tr></table></form></body></html>
第2步：需要一个显示进行文件上传的jsp页面。（例子 upload.jsp ，在editor.zip中已经包含了 \admin\scripts\fckeditor\editor\filemanager\upload\jsp\upload.jsp）
在这个jsp之前，确保在你的环境中已经把editor.zip包中src下的java文件加入你的项目中。
关于编辑器用什么进行上传，是在\admin\scripts\fckeditor\fckconfig.js中定义
可以定义上传的语言，上传脚本文件存放的位置，允许上传的文件类型
...var _FileBrowserLanguage= 'jsp' ;// asp | aspx | cfm | lasso | perl | php | pyvar _QuickUploadLanguage= 'jsp' ;// asp | aspx | cfm | lasso | php...FCKConfig.ImageUpload = true ;FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/' + _QuickUploadLanguage + '/upload.' + _QuickUploadLanguage + '?Type=Image' ;FCKConfig.ImageUploadAllowedExtensions= ".(jpg|gif|jpeg|png)$" ;// empty for allFCKConfig.ImageUploadDeniedExtensions= "" ;// empty for no one...
上传的jsp例子 upload.jsp
<%@ page contentType="text/html;charset=UTF-8"%><%@ page import="com.soft4j.httpupload4j.SmartUpload"%><%@ page import="com.soft4j.bo.AttachmentMgr"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>附件上传</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><%String pageErrorInfo = null;String[] fileInfo = null;SmartUpload su = null;StringBuffer ret = new StringBuffer();try{su = new SmartUpload();su.initialize(pageContext);su.upload();fileInfo = AttachmentMgr.upload(su,pageContext);if(fileInfo!=null){//window.parent.OnUploadCompleted方法定义在ret.append("<script type=\"text/javascript\">window.parent.OnUploadCompleted(0,'");ret.append(request.getContextPath());ret.append(fileInfo);//file urlret.append("','");ret.append(fileInfo);//file nameret.append("','');</script>");out.print(ret.toString()); }}catch(Exception e){pageErrorInfo = e.getMessage();}finally{su = null;if(fileInfo==null){ret.append("<script type=\"text/javascript\">window.parent.OnUploadCompleted(1,'','','");ret.append(pageErrorInfo);ret.append("');</script>");out.print(ret.toString());}pageErrorInfo = null;%></body></html><%}%>
第3步：需要一个配合jsp页面实现文件上传的java类。（例子 AttachmentMgr.java ，在editor.zip中已经包含了 src\com\soft4j\bo\AttachmentMgr.java）
/* * Created on 2005-6-12 * Author stephen * Email zhoujianqiang AT gmail DOT com * CopyRight(C)2005-2008 , All rights reserved. */package com.soft4j.bo;import java.awt.Image;import java.awt.image.BufferedImage;import java.io.File;import java.io.FileOutputStream;import java.sql.Connection;import java.sql.SQLException;import java.util.Date;import java.util.Vector;import javax.imageio.ImageIO;import javax.servlet.http.HttpServletRequest;import javax.servlet.jsp.PageContext;import com.soft4j.httpupload4j.SmartUpload;/** * file upload. ** @author stephen * @version 1.0.0 */public final class AttachmentMgr { public static String[] upload(SmartUpload su,PageContext pageContext) throws Exception { com.soft4j.httpupload4j.File suFile = null; StringBuffer attachFileName = null; int fileCount = 0; StringBuffer uploadPath = new StringBuffer(); try { String url = ""; String fileName = ""; for (int i = 0; i < su.getFiles().getCount(); i++) { suFile = su.getFiles().getFile(i); if (suFile.isMissing()) continue; fileName=suFile.getFileName(); url = "/admin/f/f5/"+fileName;///admin/f/f5/ 为存放上传文件的相对路径，请根据自己路径设置 suFile.saveAs(URL,SmartUpload.SAVE_VIRTUAL); } return new String[]{url,fileName}; } finally { // } }}
当完成以上3步后，就可以开始测试了：
通过http://你的web项目访问地址/example/example.html 就可以看到下面的界面了：
http://stephen830.iteye.com/upload/attachment/43998/d3f5fcc2-26fb-3e52-aedc-c4b86295c087.png
图1
点（图1）中红圈内的图片标记就会弹出下面的窗口：
http://stephen830.iteye.com/upload/attachment/44000/480ae01f-cefe-3ad8-beff-783d58d5bf13.png
图2
继续点（图2）红圈内的上传标记就会出现下面的界面：
http://stephen830.iteye.com/upload/attachment/44002/7c1252cc-1ba8-3ca7-a96a-d88d954a595b.png
图3
这时候，就可以点图3中的[浏览]按钮选择一个图片，然后点按钮[发送到服务器上]。上传成功后会有成功提示信息。最后不要忘记点右下角的[确定]按钮，这样就能把图片插入到文本框中。
如果你用的不是java也可以参考上面改成符合你的环境的，比如php,asp等。
附录：本篇涉及的文件的压缩包editor.zip
-------------------------------------------------------------
分享知识 分享快乐，希望文章能给需要的朋友带来小小的帮助。
页:
[1]