step-by-step系列fckeditor结合smartupload实现可视化图文混排

stephen830

浏览: 3010175 次
性别:
来自: 上海

最近访客更多访客>>

jAmEs_

wangzhigang2

Z865785437029

sampou

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java

fckeditor JSP Excel ASP.net ASP

★★★ 本篇为原创，需要引用转载的朋友请注明：《 http://stephen830.iteye.com/blog/256174 》谢谢支持！ ★★★

前面写的2篇step-by-step的文章，浏览次数还是蛮可观的，说明还是有不少的朋友喜欢看的，为此我也感到很欣慰，以后，将继续推出技术类的step-by-step文章，分享知识，分享快乐。

在做B/S架构的项目（产品）中经常会遇到需要图文混排的地方，比如做1个文章发布模块，文章的文字和插图就是一个简单的图文混排，文字中可以插入多张图片，并且调整图片位置。

本篇就将详细的讲述如何通过jsp+java来实现这个图文混排。下面将要使用到的技术有2块：
（1）WEB编辑器：这里采用fckeditor，相信很多朋友都知道或者已经用过了，fckeditor官方网站为 [http://www.fckeditor.net/]
（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="保存" onclick="alert('这个方法自己写');return false;"></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 | py
var _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 all
FCKConfig.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方法定义在[admin\scripts\fckeditor\editor\dialog\fck_image\fck_image.js]
			ret.append("<script type=\"text/javascript\">window.parent.OnUploadCompleted(0,'");
			ret.append(request.getContextPath());
			ret.append(fileInfo[0]);//file url
			ret.append("','");
			ret.append(fileInfo[1]);//file name
			ret.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 就可以看到下面的界面了：

图1

点（图1）中红圈内的图片标记就会弹出下面的窗口：

图2

继续点（图2）红圈内的上传标记就会出现下面的界面：

图3

这时候，就可以点图3中的[浏览]按钮选择一个图片，然后点按钮[发送到服务器上]。上传成功后会有成功提示信息。最后不要忘记点右下角的[确定]按钮，这样就能把图片插入到文本框中。

如果你用的不是java也可以参考上面改成符合你的环境的，比如php,asp等。

附录：本篇涉及的文件的压缩包editor.zip

-------------------------------------------------------------
分享知识分享快乐，希望文章能给需要的朋友带来小小的帮助。

editor.zip (499.9 KB)
下载次数: 226

查看图片附件

5
顶

0
踩

分享到：

实战java反射机制-让你迅速认识java强大的 ... | 感谢朋友们在阅读文章的时候能为我指出毛病 ...

2008-10-22 08:58
浏览 4806
评论(4)
分类:非技术
查看更多

4 楼 leeldy 2009-07-09

非常感谢，真是解决了我的一大难题啊。。。
现在有个很SB的问题，用FCKeditor的时候，IE7提示FCKConfig未定义，但是不影响正常使用，不知道为什么。

3 楼 andybrier3 2008-10-24

谢谢楼主分享！

2 楼 stephen830 2008-10-22

toeo 写道

不错..最近正在研究这个ecitor编辑器呢..不知道这个文本编辑器能不能对excel的文件进行复制并且显示表格..要做的事情还是很多...

可以对excel内容进行复制的。

1 楼 toeo 2008-10-22

不错..最近正在研究这个ecitor编辑器呢..
不知道这个文本编辑器能不能对excel的文件进行复制并且显示表格..

要做的事情还是很多...

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论