fck富文本(一)之上传图片 java

最新推荐文章于 2024-07-31 16:12:36 发布

原创最新推荐文章于 2024-07-31 16:12:36 发布 · 507 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在 FCKEditor 中集成图片上传功能，并提供了一个 Spring Boot 的具体实现案例，包括控制器代码和配置文件设置。

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

fck下载什么不说了直接去官网下我这里是4版本的

这里上传图片要自己写上传方法

@Controller
@RequestMapping("/fck")
public class FckController {
/**
	 * 上传图片
	 * @return
	 */
	@RequestMapping(value="/upload_img")
	public void uploadFile(@RequestParam("upload") MultipartFile multipartFile,HttpServletRequest request,HttpServletResponse response){
		response.setContentType("text/html;charset=UTF-8");
		String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
		String filename = multipartFile.getOriginalFilename();
		//得到文件上传的服务器路径	后面拼接static加跳转页面的@RequestMapping("/imgUpdate")内的路径
		//这个上传到项目内
		String path = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static\\fck\\";

		//上传到tomcat的临时文件路径
		//String path = request.getSession().getServletContext().getRealPath("") + "\\fck\\";
		
		//解决文件同名问题
		filename = UUID.randomUUID().toString().replace("-", "")+filename.substring(filename.lastIndexOf("."));
		
		//定义服务器的新文件
		File newFile = new File(path+filename);
		File f = null;
		try {
		    f=File.createTempFile("tmp", null);
		    multipartFile.transferTo(f);
		  //真正上传
		    FileUtils.copyFile(f, newFile);
		    f.deleteOnExit();        
		} catch (IOException e) {
		    e.printStackTrace();
		}
		
		PrintWriter out;
		String s = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction("+CKEditorFuncNum+", '"+filename+"');</script>";
		try {
			out = response.getWriter();
			out.print(s);
			out.flush();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}

写完这个后要在config.js设置url

/**
 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here.
	// For complete reference see:
	// http://docs.ckeditor.com/#!/api/CKEDITOR.config

	// The toolbar groups arrangement, optimized for two toolbar rows.
	config.toolbarGroups = [
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'forms' },
		{ name: 'tools' },
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'others' },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'styles' },
		{ name: 'colors' },
		{ name: 'about' }
	];

	// Remove some buttons provided by the standard plugins, which are
	// not needed in the Standard(s) toolbar.
	config.removeButtons = 'Underline,Subscript,Superscript';

	// Set the most common block elements.
	config.format_tags = 'p;h1;h2;h3;pre';

	// Simplify the dialog windows.
	config.removeDialogTabs = 'image:advanced;link:advanced';
	
	//上传图片路径
	config.filebrowserUploadUrl="/fck/upload_img"
};

这个