1.下载相应的fck文件
2.引进js
<script type="text/javascript" src="/res/fckeditor/fckeditor.js"></script>
<script src="/res/common/js/jquery.js" type="text/javascript"></script>
3.在放置文本编辑器位置放一个textarea
<tbody id="tab_2" style="display: none">
<tr>
<td >
<textarea rows="10" cols="10" id="productdesc" name="description"></textarea>
</td>
</tr>
</tbody>
4.写js将
textarea转化为文本编辑器
var fck = new FCKeditor("productdesc");
fck.BasePath = "/res/fckeditor/";
fck.Height = 400 ;
//图片上传的路经,调用后台的controller
fck.Config["ImageUploadURL"] = "/upload/uploadFck.do";
fck.ReplaceTextarea();
5.写图片上传的后台方法,由于不知道fck上传图片的名字,就不能像以前那样,下面我主要介绍如何实现图片上传的指定的位置,并且将上传的url返回给fck用于显示
返回url给fck要借助一个fck的jar文件java-core\2.6\java-core-2.6.jar
6.下面我写上传并返回url的后台代码
//fck上传图片到后台
@RequestMapping(value="/upload/uploadFck.do")
public void uploadFck(HttpServletRequest request,HttpServletResponse response){
//强转request
MultipartHttpServletRequest mh=(MultipartHttpServletRequest)request;
//获取文件
Map<String, MultipartFile> fileMap = mh.getFileMap();
//遍历map
Set<Entry<String,MultipartFile>> entrySet = fileMap.entrySet();
for (Entry<String, MultipartFile> entry : entrySet) {
//上传上来的图片
MultipartFile pic = entry.getValue();
//获取扩展名的方法
String extension = FilenameUtils.getExtension(pic.getOriginalFilename());
//图片名称生成策略,根据时间生成
DateFormat df=new SimpleDateFormat("yyyyMMddHHmmssSSS");
//图片的一部分
String format = df.format(new Date());
//随机三位数
Random random=new Random();
for(int i=0;i<3;i++){
format+=random.nextInt(10);
}
//实例化jersey实例
Client client=new Client();
//保存到数据库
String path="upload/"+format+"."+extension;
//另一台tomcat的请求参数
String url=Conts.IMAGE_URL+path;
//设置请求路径
WebResource resource = client.resource(url);
try {
resource.put(String.class,pic.getBytes());
} catch (IOException e) {
e.printStackTrace();
}
UploadResponse ok=UploadResponse.getOK(url);
//response的write方法返回前台为字符串,而print返回的是object类型的数据
try {
response.getWriter().print(ok);
} catch (IOException e) {
e.printStackTrace();
}
}