- 浏览: 2964617 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (893)
- android (110)
- iphone (198)
- java (79)
- JavaScript手册-目录 (9)
- JavaScript手册-Array (19)
- JavaScript手册-Boolean (5)
- JavaScript手册-Date (50)
- JavaScript手册-Math (30)
- JavaScript手册-Number (14)
- JavaScript手册-RegExp (7)
- JavaScript手册-String (38)
- JavaScript手册-全局函数 (8)
- JavaScript实用脚本 (7)
- Others (21)
- java-jpcap (7)
- java-thread (1)
- ibm文章 (3)
- classloader (2)
- java-filter (2)
- 运行环境 (33)
- java-正则 (2)
- oracle (1)
- linux-shell (26)
- wap (1)
- sqlite (3)
- wow (1)
- jvm (1)
- git (5)
- unity3d (29)
- iap (2)
- mysql (23)
- nginx (14)
- tomcat (9)
- apache (2)
- php (1)
- ubuntu (40)
- rsa (1)
- golang (21)
- appstore (5)
- sftp (2)
- log4j (2)
- netty (18)
- 测试工具 (6)
- memcache (5)
- 设计模式 (1)
- centos (8)
- google_iab (5)
- iOS专题 (4)
- mac (10)
- 安装配置帮助手册 (2)
- im4java_graphicsmagick (5)
- inotify-tools (1)
- erlang (6)
- 微信支付 (1)
- redis (8)
- RabbitMQ (5)
最新评论
-
heng123:
Netty视频教程https://www.douban.com ...
netty4.0.23 初学的demo -
maotou1988:
使用Netty进行Android与Server端通信实现文字发 ...
netty4.0.23 初学的demo -
码革裹尸:
非常感谢,正好用上
android 呼入电话的监听(来电监听) -
rigou:
提示的/222.177.4.242 无法链接到ip地址,是什 ...
通过 itms:services://? 在线安装ipa ,跨过app-store -
duwanbo:
GridView与数据绑定
★★★ 本篇为原创,需要引用转载的朋友请注明:《 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)
第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中定义
可以定义上传的语言,上传脚本文件存放的位置,允许上传的文件类型
上传的jsp例子 upload.jsp
第3步:需要一个配合jsp页面实现文件上传的java类。(例子 AttachmentMgr.java ,在editor.zip中已经包含了 src\com\soft4j\bo\AttachmentMgr.java)
当完成以上3步后,就可以开始测试了:
通过http://你的web项目访问地址/example/example.html 就可以看到下面的界面了:
图1
点(图1)中红圈内的图片标记就会弹出下面的窗口:
图2
继续点(图2)红圈内的上传标记就会出现下面的界面:
图3
这时候,就可以点图3中的[浏览]按钮选择一个图片,然后点按钮[发送到服务器上]。上传成功后会有成功提示信息。最后不要忘记点右下角的[确定]按钮,这样就能把图片插入到文本框中。
如果你用的不是java也可以参考上面改成符合你的环境的,比如php,asp等。
附录:本篇涉及的文件的压缩包editor.zip
-------------------------------------------------------------
分享知识 分享快乐,希望文章能给需要的朋友带来小小的帮助。
不错..最近正在研究这个ecitor编辑器呢..不知道这个文本编辑器能不能对excel的文件进行复制并且显示表格..要做的事情还是很多...
可以对excel内容进行复制的。
前面写的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
-------------------------------------------------------------
分享知识 分享快乐,希望文章能给需要的朋友带来小小的帮助。
评论
4 楼
leeldy
2009-07-09
非常感谢,真是解决了我的一大难题啊。。。
现在有个很SB的问题,用FCKeditor的时候,IE7提示FCKConfig未定义,但是不影响正常使用,不知道为什么。
现在有个很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的文件进行复制并且显示表格..
要做的事情还是很多...
不知道这个文本编辑器能不能对excel的文件进行复制并且显示表格..
要做的事情还是很多...
发表评论
-
Java的内存机制
2016-08-22 13:27 4421.Java的内存机制 Java 把内存划分成两 ... -
监听域对象中属性的变更的监听器
2016-07-18 19:06 1696监听域对象中属性的变更的监听器 域对象中属性 ... -
HttpSessionActivationListener
2016-07-18 18:46 597HttpSessionActivationListe ... -
Web容器监听器(实现在线统计人数,踢人)
2016-07-18 10:48 908Web容器监听器(实现在线统计人数,踢人) Servl ... -
HttpSessionBindingListener接口
2016-07-18 10:29 601HttpSessionBindingListene ... -
ServletRequestAttributeListener接口
2016-07-17 22:24 7842. HttpSessionAttribut ... -
Servlet3中异步Servlet特性介绍
2016-07-17 15:50 797Servlet3中异步Servlet特性介绍 ... -
HttpSessionAttributeListener
2016-07-15 17:49 646HttpSessionAttributeListener ... -
使用ServletContextAttributeListener
2016-07-15 16:47 789使用ServletContextAttr ... -
ServletRequestListener
2016-07-15 16:25 561ServletRequestListener接口 ... -
HttpSessionListener
2016-07-15 14:56 592HttpSessionListener接口 M ... -
ServletContextListener 接口
2016-07-15 12:16 577在 Servlet API 中有一个 Se ... -
ReflectASM,高性能的反射
2016-04-29 17:19 922http://www.oschina.net/p/r ... -
Java多线程与静态方法
2016-04-26 11:52 806Java多线程与静态方法 在多线程中使用静态方法会发生什么 ... -
log4j日志输出格式
2016-04-12 20:58 1063log4j日志输出格式 在LOG4J的配置文件中,l ... -
Servlet3.0
2016-04-12 16:58 647一、Servlet3.0介绍 Servlet3 ... -
log4j2 使用详解
2016-04-12 14:14 1407log4j2 使用详解 转载自 Blog of ... -
Eclipse jar打包和命令行运行
2016-04-08 10:44 2901?Eclipse jar打包和命令行运行 第1步: ... -
GRAPHICSMAGICK+IM4JAVA错误Cannot run program "gm": error=2
2015-05-19 15:27 4063在通过 GRAPHICSMAGICK+IM4JAVA ... -
GraphicsMagick安装、实时生成缩略图
2015-05-19 13:39 2364GraphicsMagick安装、实时生成缩略图 ...
相关推荐
FCKeditor的相关资源fckeditor-java-2.6-bin,fckeditor-java-2.6-src,fckeditor-2.6.6
在公告管理开发方面,FCKeditor一直是用户喜欢的一款第三方插件 但是新手在使用过程中会出现这样或者那样的问题 本文档旨在帮助新手学会使用Fckeditor,希望对大家的学习有所帮助
fckeditor 编辑器,可能对做web 开发的人有用哦!
Exploiting PHP Upload Module ofBypassing File-type CheckExploiting PHP Upload Mo
FCKeditor支持当前流行的浏览器如IE,Firefox,Netscape,Opera等戏中的坦克所遇到的障碍物主要有墙、炸弹(泡泡)。坦克的所到之处都可以留下炸弹,炸弹会在一定时间内爆炸,一旦对手被炸到,你就赢了~
FCKeditor_2.6.6.zip+fckeditor-java-2.4.1.rar+fckeditor-java-2.4.1-bin.zip+fckeditor-java-2.4-src.zip+fckeditor-java-demo-2.4.war.zip 分享几个包,让你学习有成。加油
fckeditor-java-2.4.1-bin和 fckeditor-java-2.4.1-src配套使用
fckeditor2.5资源关于fckeditor-java-demo-2.5.war下载
一个简易的word功能的编辑器 一般都是集成在其他项目的下面 方便对图片的处理
这个是JAVA用的fckeditor,用过的人都知道这个功能很强大
fckeditor-java-2.6 源代码 FCK fckeditor-java-2.6 源代码 FCK fckeditor-java-2.6 源代码 FCK fckeditor-java-2.6 源代码 FCK
FCKeditor-2.3.rar新闻编辑器FCKeditor-2.3.rar新闻编辑器FCKeditor-2.3.rar新闻编辑器
很不错的资源,在先编辑器,可以编辑图文混合的文本
网络上有很多FCKeditor的用法,大多数是互相抄袭,或者...但是这个FCKeditor使用方法详解--图文详解讲解的非常清楚,关键还是附带图片,让人一看就一目了然,很容易看懂。另外还收录了fckeditor的瘦身。很全面的哦--
包括如下几个文件: FCKeditor_2.6.5.zip 【主文件】 fckeditor-java-2.5-bin.zip 【jar包】 fckeditor-java-2.5-src.zip 【源码】 fckeditor-java-demo-2.5.war 【例子】 FCKEditor使用指南.rar 【指南很详细!】
<add key="FCKeditor:BasePath" value="/fckeditor/"/> <add key="FCKeditor:UserFilesPath" value="/Upload/text"/> <!--设置fck文件名的现实格式--> <add key="FCKeditor:FilenamePattern" value="%guid.%extl"/...
wp 插件fckeditor-for-wordpress-plugin.3.3.1
内包含fckeditor-java-2.4-bin.zip,fckeditor-java-2.4-src.zip,fckeditor-java-demo-2.4-beta-1.war,FCKeditor_2.6.3.zip和传智播客上面的视频配置一样的
一个很好用的开源软件,是一个可视化的HTML编译器……