fck配置，以及上传图片到指定的路径

最新推荐文章于 2024-09-14 09:58:08 发布

Ashan-Da宝旗

最新推荐文章于 2024-09-14 09:58:08 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhao13083837081/article/details/52846640

本文介绍如何在项目中集成FCKeditor富文本编辑器，并实现图片上传功能。包括下载fck文件、引入JS、转换textarea为编辑器及自定义图片上传路径等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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