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();
}
}